The vertical-align Property

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.

Typography Units

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;
}

Baseline Value for Inline Elements

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.

Baseline Value for Table-Cell Elements

Sub #

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

Sub Value for Inline Elements

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.

Super Value for Inline Elements

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.

Text-top Value for Inline Elements

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.

Text-bottom Value for Inline Elements

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.

Middle Value for Inline Elements

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

Middle Value for Table-Cell Elements

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.

Top Value for Inline Elements

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

Top Value for Table-Cell Elements

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.

Bottom Value for Inline Elements

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

Bottom Value for Table-Cell Elements

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 */
}

Length Value for Inline Elements

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 */
}

Percentage Value for Inline Elements

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

Keep in touch KeepinTouch

Subscribe to my Newsletter 📥

Receive quality articles and other exclusive content from myself. You’ll never receive any spam and can always unsubscribe easily.

Elsewhere 🌐