CSS Reference Guide: vertical-align

The CSS vertical-align property sets vertical alignment on inline elements or elements displayed as an inline-block. The vertical-align property also works on table-cell elements.

Jump ahead:

• Demo
• Values
  • Keywords
  • Length and percentage values
  • Global values

Its syntax is as follows:

element {
  vertical-align: baseline|top|bottom|middle|text-top|text-bottom|sub|super|length units;
}

---

Demo

See the Pen
CSS Vertical Align Example by Solomon Eseme (@kaperskyguru)
on CodePen.

---

Values

Keywords

baseline

This is the default value for vertical-align. As its name implies, it aligns the element to the baseline of the parent element.

img {
  vertical-align: baseline
}

top

Aligns the element to the height of the tallest element on a line.

img {
  vertical-align: top
}

bottom

Aligns the element to the bottom, at the same level as the longest element below.

img {
  vertical-align: bottom
}

middle

Aligns the element with the center of its parent element.

img {
  vertical-align: middle
}

text-top

Aligns the element using the top of the tallest letter in the line of its parent element.

img {
  vertical-align: text-top
}

text-bottom

Aligns the element using the bottom of the longest letter in the line of its parent element.

img {
  vertical-align: text-bottom
}

sub

Aligns the element below the baseline of its parent element. It behaves more like the <sub> tag.

img {
  vertical-align: sub
}

super

Aligns the element above the baseline of the parent element. It behaves more like the <sup> tag.

img {
  vertical-align: super
}

---

Length and percentage values

Aligns the element at a given unit. A positive number will align the element above the baseline, and a negative value will align the element below the baseline.

These values can be of any length unit: px, em, %, etc.

img {
  vertical-align: 10px
}
img {
  vertical-align: 50%
}
img {
  vertical-align: 3em
}

---

Global values

initial

Sets the alignment of the element to its default, which is baseline.

img {
  vertical-align: initial
}

inherit

Sets the alignment of the element to the value of its parent element.

img {
  vertical-align: inherit
}