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.

We made a custom demo for .
No really. Click here to check it out.

Click here to see the full demo with network requests

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
}

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — Start monitoring for free.