vertical alignment of stuff inside tags?

Say I have two columns (pseudocode follows):

<div class="row">
  <div class="column 1"><p> TEXT STUFF</p></div>
  <div class="column 2"><img> IMAGE STUFF </img></div>
</div>

Is it possible to somehow align the content in the second column using CSS to make sure that the IMAGE STUFF is always vertically centered with respect to column one?

I am looking at http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

but not sure if it will apply to IMAGE STUFF?

Best regards,
Michael
Notify enabled - test to see if it works this time.

Hey Michael,

If that’s the markup you’re going with, you can setting the image to vertical-align: middle; should do the trick!

Ben

Hi Ben,

Thanks for the feedback. I tried it on the left / right column on www.isci.one using CLASS ID = “align-vertical-column” and then added the following CSS in my custom.css file:

div.align-vertical-column {
  vertical-align: middle;
}

Unfortunately, it didn’t seem to work. I have also tried to enable equalize column heights for the respective columns on the front page.

Any advice is much appreciated.

Best regards,
Michael

Hi Michael,

Can you enable equal column heights again and then add a custom class to each of your columns. Something like vert-align and then use the following CSS.

.vert-align {
  align-items: center;
}

Thanks,
Danny

Hi Danny,

Thanks it worked! :slight_smile:

Best regards,
Michael

Hi Michael,

No problem and happy to hear that resolved your issue.

Thanks,
Danny