Webdev Recipes - Vertically Aligning Elements
Problem: You have multiple items of different sizes that you want vertically aligned.
display: inline-block and
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