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.