vertical-align (CSS property)

Tweet

Description

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

Example

This style rule makes images within table cells align to the bottom of the cell, to eliminate the gap that otherwise occurs:

td img {
  vertical-align: bottom;
}

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.

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.

No Reader comments