vertical-align property - CSS Reference

Definition and Usage

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

Initial baseline
Applies to inline-level and table-cell elements
Inherited no
Percentages refer to the line-height of the element itself
Media visual
Computed Value for percentage and length values, the absolute length, otherwise the keyword as specified
Animatable yes, as a length
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

vertical-align: baseline     /* keyword values */
vertical-align: sub
vertical-align: super
vertical-align: text-top
vertical-align: text-bottom
vertical-align: middle
vertical-align: top
vertical-align: bottom
vertical-align: 10em          /* <length> values */
vertical-align: 4px
vertical-align: 20%           /* <percentage> values */
vertical-align: inherit

Values (for inline elements)

Most of the values vertically align the element relative to its parent element:

baseline: Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea> is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other.
sub: Aligns the baseline of the element with the subscript-baseline of its parent.
super: Aligns the baseline of the element with the superscript-baseline of its parent.
text-top: Aligns the top of the element with the top of the parent element's font.
text-bottom: Aligns the bottom of the element with the bottom of the parent element's font.
middle: Aligns the middle of the element with the middle of lowercase letters in the parent.
<length>: Aligns the baseline of the element at the given length above the baseline of its parent.
<percentage>: Like <length> values, with the percentage being a percent of the line-height property.

(Negative values are allowed for <length> and <percentage>.)

The following two values vertically align the element relative to the entire line rather than relative to its parent:

top: Align the top of the element and its descendants with the top of the entire line.
bottom: Align the bottom of the element and its descendants with the bottom of the entire line.

For elements that do not have a baseline, the bottom margin edge is used instead.

Values (for table cells)

baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>): Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
top: Align the top padding edge of the cell with the top of the row.
middle: Center the padding box of the cell within the row.
bottom: Align the bottom padding edge of the cell with the bottom of the row.