How can I get the images within the inline-block divs to center vertically?

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