vertical-align

Aligns inline elements and table cell content vertically.

Initial value: baseline
Inherited: No
Animatable: yes, for lengths and percentages
Applies to: inline elements and table cells
JavaScript: element.style.verticalAlign = "middle"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.icon {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
}

Example HTML

<p style="margin: 0; font-size: 16px;">
  <img class="icon" src="/collections/nextjs.png" alt="" width="20" height="20" style="vertical-align: -4px;">
  Next.js in the course’s new module
</p>

Preview

Definition and usage

The vertical-align property works in two contexts. On inline elements, such as icons or images inside text, it positions them relative to the line of text: on the baseline, centered, at the top. On table cells, it aligns the whole cell’s content vertically.

It doesn’t center blocks inside a container. That’s a common misunderstanding: vertical-align: middle on a plain <div> changes nothing. Flexbox or Grid handle that instead.

Classic uses are an icon next to text (middle), and removing the gap under an inline image that sits on the baseline (vertical-align: top or display: block).

Syntax

vertical-align: baseline | middle | top | bottom | text-top | text-bottom | sub | super | <length> | <percentage>;

Values

baseline
The bottom of the element on the text’s baseline.
middle
The center of the element at the height of the lowercase letters’ midpoint.
top
The top of the element at the top of the line.
super
Raised, like a superscript.
-6px
<length>
An offset by a specific value relative to the baseline.

Value	Type	Description
baseline		The bottom of the element on the text’s baseline.
middle		The center of the element at the height of the lowercase letters’ midpoint.
top		The top of the element at the top of the line.
super		Raised, like a superscript.
-6px	<length>	An offset by a specific value relative to the baseline.

Values in practice

baseline

The bottom of the element on the text’s baseline.

.demo { vertical-align: baseline; }

middle

The center of the element at the height of the lowercase letters’ midpoint.

.demo { vertical-align: middle; }

top

The top of the element at the top of the line.

.demo { vertical-align: top; }

super

Raised, like a superscript.

.demo { vertical-align: super; }

-6px

An offset by a specific value relative to the baseline.

.demo { vertical-align: -6px; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

To center a block vertically, use Flexbox or Grid, not vertical-align.
A small gap under an image inside a block disappears once you set the image to display: block or vertical-align: top.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course