B.120. vertical-align

This property sets the vertical alignment of text and other inline content with respect to either its parent element's font or the line in which it appears.

This value also lets you set the vertical alignment of content within table cells.

Inherited: No

See also: Section B.107text-align

B.120.1. Value

This property supports a range of constant values as well as CSS measurements and percentages.

The majority of the supported constants for this property align text and other inline content with respect to the parent element's font:

baseline

The baseline^[14] of the content will line up with the baseline of the parent element's font. If the content has no baseline (e.g. an image), then the bottom of the content is lined up with the baseline of the parent element's font.

^[14] The baseline is the imaginary line on which text is written. The bottoms of letters rest on the baseline, with descenders extending below it.

middle

The content is aligned so that its vertical midpoint lines up with a point that is half the parent element font's x-height^[15] above the parent element's baseline.

^[15] The x-height is the height of lowercase letters in a font.

sub

The content is aligned so that its baseline is positioned some distance below the parent element's baseline, suitable for subscript text. You will usually want to set a smaller font-size property for the content as well.

super

The content is aligned so that its baseline is positioned some distance above the parent element's baseline, suitable for superscript text. You will usually want to set a smaller font-size property for the content as well.

text-bottom

The content is aligned so that its bottom lines up with the bottom of the parent element's font. This position is independent of the actual line height.

text-top

The content is aligned so that its top lines up with the top of the parent element's font. This position is independent of the actual line height.

As with the above constants, setting the vertical position with a numerical value gives a position relative to the parent element's font:

length

A CSS length (px, pt, em, etc.) shifts the content's baseline—or bottom, if no baseline exists—up or down from the parent element's baseline for positive or negative values, respectively.

percentage

A percentage (e.g. 50%) shifts the content's baseline—or bottom, if no baseline exists—up or down from the parent element's baseline by a percentage of the element's line-height property for positive or negative values, respectively.

Finally, two additional constants let you set the vertical position, with respect to the line in which the content appears. This may be considerably different from the parent element's font (e.g. if the line contains a tall image that increases the overall line height).

bottom

The content is aligned so that its bottom (not its baseline) rests against the bottom of the line area.

top

The content is aligned so that its top rests against the top of the line area.

When applied to table cells, this property does not support sub, super, text-bottom, or text-top—all of these behave like baseline. The constants bottom, middle, and top refer to the cell box, while baseline ensures that the first line of each cell shares the same baseline as the other cells in the same row.

Initial value: baseline

B.120.2. Compatibility

CSS Version: 1 (the length value format was added in CSS2)

This property is supported by Internet Explorer 4 or later, Opera, and Mozilla browsers (including Netscape 6 or later).

Internet Explorer for Windows supports only baseline, sub, and super in version 5 or earlier. Version 5.5 or later supports the other constants, but only on HTML elements that support the valign attribute (i.e. table cells). Internet Explorer for Windows does not support setting length or percentage values for this property.

B.120.3. Example

This style rule will align content within table header cells (th) to the vertical middle of the cell:

th {
  vertical-align: middle;
}