Description

This property controls the vertical alignment of inline boxes within a line box, or of table cells within a row.

Value

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.

• The following keyword values can be specified for inline boxes:

  baseline

  aligns the baseline of the box with the baseline of the parent box; if the box doesn’t have a baseline (for instance, an image) the bottom margin edge is aligned with the parent’s baseline

  bottom

  aligns the bottom of the aligned subtree with the bottom of the line box¹

  middle

  aligns the vertical midpoint of the box with a point that’s half the parent’s x-height above the baseline of the parent box

  sub

  lowers the baseline of the box to a position suitable for subscripts of the parent’s box

  super

  raises the baseline of the box to a position suitable for superscripts of the parent’s box

  text-bottom

  aligns the bottom of the box with the bottom of the parent element’s font

  text-top

  aligns the top of the box with the top of the parent element’s font

  top

  aligns the top of the aligned subtree with the top of the line box

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 an inline table is the baseline of the first row of the table.

The following values apply to table cells:

baseline

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

bottom

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

middle

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

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 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.

Compatibility

In Internet Explorer for Windows versions up to and including 8, 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 Internet Explorer for Windows version 8 the descender space of an inline box containing an img element set to vertical-align baseline (and with no sibling line boxes containing text) nested in an a element, is drawn only on :hover. (Bug documented by James Hopkins).

In Firefox up to and including version 3.5;Chrome up to and including version 3; Safari up to and including version 4; some elements behave as if the declaration vertical-align: inherit was in the user agent style sheet.

As an example, in all the above (and Internet Explorer for Windows up to and including version 8), 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.