The vertical-align property controls the vertical positioning of elements within their parent. It applies to inline-level elements and table-cell elements. It has 10 possible values -

baseline

sub

super

text-top

text-bottom

middle

top

bottom

<length>

<percentage>

Typography Units

The different values for the vertical-align property are dependent on specific typography units. So, to understand the values, we first need to understand these units of typography. There are 7 of these units that the values are base upon.

Colour Unit Description baseline The baseline for the font subscript baseline The baseline for subscript text superscript baseline The baseline for superscript text x height The height of the letter “x” in the font line height The vertical length of the line font top The top-most part of the font font bottom The bottom-most part of the font

The Values

The vertical-align property vertically aligns an inline or table-cell element according to these units of typography. Depending on whether the property is being applied to an inline or table-cell element, the values have slightly different meanings.

Baseline

The baseline value, for inline elements, aligns the current element’s baseline to the parent element’s baseline. In the example below, the box has the following styles -

.foo { vertical-align: baseline; height: 50px; width: 50px; display: inline-block; background-color: plum; position: relative; }

For table-cell elements, the value aligns the current cell’s content with the baseline of all other baseline-aligned cells in the same row. In the example below, all cells in the highlighted row have a value of baseline.

Sub

The sub value, for inline elements, aligns the current element’s baseline to the parent element’s subscript baseline.

For table-cell elements, the value produces the same result as baseline .

Super

The super value, for inline elements, aligns the current element’s baseline to the parent element’s superscript baseline.

For table-cell elements, the value produces the same result as baseline .

Text-top

The text-top value, for inline elements, aligns the current element’s top to the parent element’s font top.

For table-cell elements, the value produces the same result as baseline .

Text-bottom

The text-bottom value, for inline elements, aligns the current element’s bottom to the parent element’s font bottom.

For table-cell elements, the value produces the same result as baseline .

Middle

The middle value, for inline elements, aligns the current element’s middle to the parent element’s middle. The middle of the parent element is calculated by taking the x height, halving it, and adding it to the baseline.

For table-cell elements, the value aligns the current cell’s content with the center of the padding box of the row.

Top

The top value, for inline elements, aligns the current element’s top to the top of the entire line that the current element sits within. This value is not necessarily related to font elements within the line.

For table-cell elements, the value aligns the current cell’s content with the top padding edge of the row.

Bottom

The bottom value, for inline elements, aligns the current element’s bottom to the bottom of the entire line that the current element sits within.

For table-cell elements, the value aligns the current cell’s content with the bottom padding edge of the row.

Length

A length value, for inline elements, aligns the current element’s baseline to a length equal to the parent element’s baseline plus the specified length. In the example below, the pink box has the following styles -

.foo { vertical-align: 100px; /* other styles */ }

For table-cell elements, the value produces the same result as baseline .

Percentage

A percentage value, for inline elements, aligns the current element’s baseline to a calculated length equal to the parent element’s baseline plus the specified percentage of the parent element’s line height. In the example below, the pink box has the following styles -

.foo { vertical-align: 200%; /* other styles */ }