Search code examples
htmlcssimagegridvertical-alignment

How to vertical align text next to image with skeleton grid


I'm trying to vertically align the images with the text on the "Board of Advisors" tab on THIS PAGE.

Board of Advisors Page

Shortened html:

<div class="four columns alpha"><img class="ImageBorder" src="LINK" alt="" /></div>
<div class="twelve columns omega">
<p class="padding">TEXT</p>
</div>
</div>

I've tried some of the multiple line solutions presented HERE, but can't get the text/image to line up correctly. Is there a good way to do this with a grid system?

Thanks!


Solution

  • Here is what you need to add:

    .omega{
       display: inline-block;
       float: none;
       margin-left: 0;
       vertical-align: middle;
    }
    
    .alpha{
      display: inline-block;
      float: none;
      vertical-align: middle;
    }
    

    enter image description here