CSS Vertical Alignment

The CSS vertical-align property controls the vertical position of inline-level and inline-block elements within a line and the vertical alignment of content inside table cells.

Despite its name, vertical-align is not a general-purpose method for vertically centering block elements. Its behavior depends on whether it is being used with inline content or table cells.

vertical-align Syntax

The vertical-align property accepts keywords, lengths, and percentage values. Its initial value is baseline.

img {
  vertical-align: middle;
}

This rule vertically aligns an inline image using the middle value relative to the surrounding inline content.

Inline Vertical Alignment

When applied to an inline-level or inline-block element, vertical-align controls how that element is positioned vertically within the current line box.

img {
  vertical-align: middle;
}

This is commonly useful when aligning images, icons, form controls, or other inline elements with nearby text.

vertical-align Values

Several keyword values can be used to control the vertical position of inline content.

Value	Description
`baseline`	Aligns the element's baseline with the baseline of its parent. This is the initial value.
`middle`	Aligns the middle of the element with the parent's baseline plus half the parent's x-height.
`sub`	Positions the element at the parent's subscript baseline.
`super`	Positions the element at the parent's superscript baseline.
`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.
`top`	Aligns the top of the element with the top of the line box.
`bottom`	Aligns the bottom of the element with the bottom of the line box.

Length and Percentage Values

The vertical-align property can also move an inline element above or below its baseline using a length or percentage value.

.raised {
  vertical-align: 4px;
}
.lowered {
  vertical-align: -4px;
}

A positive length raises the element relative to its baseline, while a negative length lowers it. Percentage values are calculated from the element's line-height.

.raised {
  vertical-align: 25%;
}

Table Cell Alignment

When vertical-align is applied to a table cell, it controls how the cell's content is positioned vertically within the available height of the row.

td {
  vertical-align: middle;
}

Common values for table cells include top, middle, and bottom.

Value	Table Cell Behavior
`top`	Positions the cell content toward the top of the row.
`middle`	Centers the cell content vertically within the row.
`bottom`	Positions the cell content toward the bottom of the row.

Not for Block Centering

A common beginner mistake is trying to use vertical-align: middle to vertically center a regular block element inside another block element.

.box {
  vertical-align: middle;
}

This does not vertically center a normal block element. Modern layouts generally use techniques such as Flexbox or Grid when an entire block needs to be vertically centered within a container.

vertical-align Example

The following example uses an inline-block element placed between surrounding text so the effect of vertical-align is easy to see. Open the example in the editor and change middle to baseline, top, bottom, text-top, text-bottom, super, sub, 8px, or -8px, then run the code to compare the results.

.marker {
  vertical-align: middle;
}

Play in Editor