{vertical-align:} Vertical-Align Property

The {vertical-align:} property controls the vertical alignment of inline boxes within a line box, or of table cells within a row.

• The following values apply to inline boxes:
• A length value raises or lowers (depending on its sign) the box by the specified distance.
• A percentage value raises or lowers (depending on its sign) the box by the distance specified as the percentage applied to the element’s {line-height:}.

For inline blocks, the baseline is the baseline of the last line box in the normal flow. If there isn’t one, the element’s bottom margin edge is used.

The baseline of a table cell is the baseline of the first line box in the cell. If there is none, the bottom of the cell box is used.

The following values apply to table cells:

{vertical-align:baseline}

aligns the baseline of the cell with the baseline of the first of the rows it spans.

{vertical-align:bottom}

aligns the bottom of the cell box with the bottom of the last row it spans.

{vertical-align:middle}

aligns the center of the cell with the center of the rows it spans.

{vertical-align:top}

aligns the top of the cell box with the top of the first row it spans.

Any other value, including lengths and percentages, won’t apply to cells. The computed vertical alignment will be {vertical-align:baseline}.

The baseline of a table cell is the baseline of the first line box in the cell. If there is none, the bottom of the cell box is used.

In Internet Explorer for Windows versions up to and including 7, some elements behave as if the declaration {vertical-align:inherit;} was in the user agent style sheet. The values {bottom;} and {top;} are treated like {text-bottom;} and {text-top;}, respectively. Length values, percentages, and the values {sub;}, {super;}, {text-bottom;}, and {text-top;} don’t compute to baseline for table cells.

Internet Explorer for Windows versions up to and including 7 don’t support the value {inherit;}.

In Firefox up to and including version 2, some elements behave as if the declaration {vertical-align: inherit;} was in the user agent style sheet.

As an example, in both Firefox and Internet Explorer for Windows, a {vertical-align value specified for a table row will be applied to all the cells in that row. This is incorrect, because {vertical-align:} doesn’t apply to table rows, and isn’t inherited, so such a setting should have no effect.