Vertical Align an Element

By Stephen Bucaro

Use the vertical-align property to set the vertical position of an element on a line. The vertical-align property is a bit difficult to understand. First you must understand the difference between block elements and inline elements.

Block elements usually start on a new line and cause the element that follows them to start on a new line. Examples of block elements are headings <H1>, paragraphs <p>, and horizontal rules <hr>. Inline elements usually flow one after another from left to right on a webpage. Examples of inline elements are text, images and spans <span>. The vertical-align property is applied to inline elements.

You must also understand the difference between baseline and bottom. The baseline is an imaginary line that text is written on. It does not include the space used for decenders. Examples of decenders are the curves at the bottom of lower-case j and g. Sometimes the vertical-align property works relative to the baseline, and other times it works relative to the bottom, which include the space for the decenders.

Do not consider this article an authority on the vertical-align property, because I can't find any source on the Internet that defines this property in plain-simple English with example code and provides visual examples. But you should be able to find the answer you need here because I DO provide code and working examples.

vertical-align:top

Align the top of the element to the top of the tallest element on the line.

<img src="red.gif"><img style="vertical-align:top;" src="green.gif">

vertical-align:bottom

Align the bottom of the element to the bottm of the line. (not to the baseline which does not include the space used for decenders).

<img src="red.gif">TEXT<img style="vertical-align:bottom;" src="green.gif">