Centering images inside block-inline divs

Question

I have tried everything I could find on the internet to get the images inside the divs to center vertically and nothing has worked. Does anyone know something that will definitely work? Any help will be greatly appreciated,

thanks!

I could not get the given solution to work. I am thinking that likely the inline-block nature of the divs is affecting it.

var to_add = "<div style='width:600px;width:100%'>"

//far left stims
to_add += "<div style='height:450px; width:200px; text-align:center;display:inline-block;border: 2px solid black;vertical-align:middle;'>";

to_add+="<br>"

var wrapper = $("<div id='jspsych-single-stim-upper-left' style='vertical-align:middle;'> </div>");
wrapper.html(trial.a_path_upper_left_stim);
to_add+= wrapper.html();

to_add+="<br>" //because I couldn't get top and bottom margins to work
to_add+="<br>"
to_add+="<br>"
to_add+="<br>"


var wrapper = $("<div id='jspsych-single-stim-lower-left' style='vertical-align:middle'> </div>");
wrapper.html(trial.a_path_lower_left_stim);
to_add+= wrapper.html();

to_add+="</div>"

//middle stim
to_add += "<div style='height:450px; width:200px;border: 2px solid black;display:inline-block;text-align:center;vertical-align:middle;'>";

to_add+="<br>"
// display stimulus

var wrapper = $("<div id='jspsych-single-stim-middle' style=' vertical-align: middle'> </div>");
wrapper.html(trial.a_path_middle_stim);
to_add+= wrapper.html();


to_add+="</div>"

//far right stims

to_add += "<div style='height:450px; width:200px; text-align:center;display:inline-block;border: 2px solid black;vertical-align:middle'>";

var wrapper = $("<div id='jspsych-single-stim-upper-right style='vertical-align:middle' > </div>");
wrapper.html(trial.a_path_upper_right_stim);
to_add+= wrapper.html();

to_add+="<br>"
to_add+="<br>"
to_add+="<br>"
to_add+="<br>"

var wrapper = $("<div id='jspsych-single-stim-lower-right' style='vertical-align:middle'> </div>");
wrapper.html(trial.a_path_lower_right_stim);
to_add+= wrapper.html();

to_add+="</div>"
to_add+="</div>"


display_element.append(to_add);

HTML exists for a reason. Why on earth would you be assembling all of it via JavaScript? — Josh Burgess, Aug 06 '15 at 21:38
possible duplicate of [How to center an element horizontally and vertically?](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — DavidS, Aug 06 '15 at 21:38
See also the countless linked answers for how to vertically center elements. Yes, it's tricky. Yes, it's possible. — DavidS, Aug 06 '15 at 21:39
That is too bad. If you could get it to work, then your elements would be vertically centered. — DavidS, Aug 06 '15 at 22:09
To be more clear: this question is absolutely, 100% a duplicate. What you're trying to achieve is an extremely common operation, and there are dozens of questions on StackOverflow about it. You claim to have "tried everything [you] could find on the internet", and yet the code you posted doesn't look like anything I've ever seen. Why don't you try one of the solutions posted on StackOverflow and ask a question if you have a problem with it? I'm sorry if this sounds rude, but it really should help solve your problem. — DavidS, Aug 07 '15 at 01:57

score 0 · Answer 1 · answered Aug 06 '15 at 23:19

How about positioning it 50% 50%?

background-position: 50% 50%;

.center-background {
  background-image: url("https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300");
  width: 600px;
  height: 500px;
  background-repeat: no-repeat;
  border: 5px solid fireBrick;
  background-position: 50% 50%;
}

<div class="center-background"></div>

Centering images inside block-inline divs

1 Answers1