如何将内联块div中的图像垂直居中？ [英] How can I get the images within the inline-block divs to center vertically?

问题描述

我无法找到任何会导致图像调整垂直边距或在div内垂直居中的内容。



当前设置的照片

I haven't been able to find anything that will cause the images to adjust their vertical margins or to center vertically within the divs.

A photo of the current setup

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);

推荐答案

（< div id =' jspsych-single -stim-left-left' style =' vertical-align：middle;' > < / div > ）;
wrapper.html（trial.a_path_upper_left_stim）;
to_add + = wrapper.html（）;

to_add + =< br > //因为我无法获得上下边距工作
to_add + =< br >
to_add + =< br >
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 >

// mid 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 >
//显示刺激

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' 样式 =' vertical-align：middle' > < / div > ）;
wrapper.html（trial.a_path_middle_stim）;
to_add + = wrapper.html（）;


to_add + =< / div >

//最右边点击

to_add + =< ; div style < span class =code-keyword> =' height：450px; width：200px; text-align：center; display：inline-block; border：2px solid black ; vertical-align：middle' > ;

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中的图像垂直居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！