vertical-align

The vertical-align property designates the vertical alignment of an inline, inline-block, or table-cell box.

Syntax

Example:

img.base {
  vertical-align: baseline;
}

Values

baseline
Default value. Aligns the element with the baseline of the parent.

length
Raises or lowers an element by the designated length based on a positive or negative value.

%
Raises or lowers an element by a percent of the “line-height” property based on a positive or negative value.

sub
Aligns the element with the subscript baseline of the parent.

super
Aligns the element with the superscript baseline of the parent.

top
Aligns the element with the top of the tallest element on the line.

text-top
Aligns the element with the top of the parent element’s font.

middle
Aligns the element in the middle of the parent.

bottom
Aligns the element with the lowest element on the line.

text-bottom
Aligns the element with the bottom of the parent element’s font.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of vertical-align? Submit a codepen.io demo and we'll showcase it here ↴