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.

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

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