Mike Pearce

The curious case of inline-block, min-height and vertical-align

I was struggling with a dynamic number of boxes that I wanted centered in a <div> recently. I’d tried floating but it was just getting messy, that is until my great friend Jon Reed suggest I used display: inline-block;

I’d heard of this new-fangled, oft forgotten CSS before, but never really used it. Floats had always sufficed for what I needed. It’s safe to say, however, that it solved my problem and is supported widely enough for me to not have to worry about compatibility where I currently work. There was a slight problem with the solution that took me a while to solve however.

If you need to know more about inline-block, then check the site here, it’s a good overview (even if it’s a little over the top on the “drawback” of whitespace, anyway…). So, my problem was that when I’d finished adding the markup and CSS, the page looked like this:

I figured it was a whitespace problem, so I removed all the whitespace (which left the markup looking like shite), but that didn’t work either. The boxes that were displaying had already been created by another dev, so I went and had a look at the CSS to see if there was anything else there that might have caused the problem.

The only thing that wasn’t a border or background color was min-height: 147px; when I removed this, the boxes aligned themselves like so:

Ahah! So, with vertical-align: bottom and a min-height: set, it seems like inline-block will align to the bottom of the element content. Easily fixed, I put the min-height back and set the vertical-align to top, et voila:

And my problem is solved. I thought I would blog about it, just in case anyone else runs up against this problem. None of this is scientifically tested or particularly well researched, but, well, it works!


  1. Odin / Velmont - October 13, 2010 8:51 am

    Thank you man! 😀

  2. Guero - July 28, 2011 12:40 pm

    I was facing the same problem, which appeared only in Chrome; Firefox was fine. The “vertical-align:bottom” fixed the issue. Many thanks.

  3. CodeBotics - December 8, 2012 4:37 pm

    You just saved me so much time, thank you!

  4. Dave - February 28, 2013 7:04 pm

    I’ve been wondering this for weeks. Thank you!

  5. Porgos - April 9, 2013 3:40 am

    You saved the day. After using a plugin that didn’t have horizontal listing implemented (yet), I had to modify it on my own. God bless you man.


Leave a Reply

%d bloggers like this: