Webdev Recipes - Vertically Aligning Elements

Problem: You have multiple items of different sizes that you want vertically aligned.

Solution: Use display: inline-block and vertical-align: middle.

Making sure that buttons in a toolbar, or form inputs of different sizes lined up used to require monkeying around with margin offsets and line height hacks. Luckily, elements that are displayed with inline-block can be vertically aligned. This can also be a useful replacement for using floats in your layout.

The only downside to this approach is that these elements will show whitespace between them if there are any spaces in the markup.

This is supported in all your favorite browsers and even IE8.

For more information, Steven Bradley has an excellent article covering the differences between inline-block and float.

Demo:

Vertical Align:
blog comments powered by Disqus
Monkey Small Crow Small