Select Page

Why is it so difficult to vertically-center HTML elements??

Yea, that’s what I was recently saying – and looking through the web, it looks like quite a lot of folks are saying it.  You would think it might be easy using CSS like this:

vertical-align: middle;

But nay!  That will not always work.  For my specific case, I am using Bootstrap 3 and have a setup like this:

<div class="row">
 <div class="col-md-6"><div>my left content</div></div>
 <div class="col-md-6"><div>my right content</div></div>

After a lot of messing around, I figured out this CSS can be applied to the “col-md-x” div elements:

float: none;
display: inline-block;
vertical-align: middle;

I found lots of possible solutions online – including several for Bootstrap 2.  But none of these worked for me.  Sure hope this helps someone out there.