The CSS vertical-align property

Q: Why does vertical-align: middle not center my div?

Because vertical-align only works on inline, inline-block and table-cell elements, not block boxes. To center a block, use Flexbox: display: flex; align-items: center;.

Q: How do I vertically align an icon with text?

Set vertical-align: middle (or text-bottom) on the inline icon so it lines up with the adjacent text rather than sitting below the baseline.

Q: How do I vertically center content in a table cell?

Set vertical-align: middle on the . In table cells the property aligns the cell's content top, middle or bottom.

Q: What is the default value of vertical-align?

It is baseline, which lines the element's baseline up with its parent's baseline.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS vertical-align property aligns inline, inline-block and table-cell elements within their line or cell — for example lining an icon up with adjacent text. It does not vertically center block elements or flex children; for that, use Flexbox. This mismatch is the source of a lot of confusion.

Overview

vertical-align is one of the most misunderstood properties in CSS, because its name promises more than it delivers. It aligns elements vertically only in two specific contexts: inline-level content within a line of text (an icon next to a label, a superscript), and content within a table cell.

What it does not do is vertically center a <div> inside another div. People try vertical-align: middle on a block element constantly, and nothing happens, because block boxes are not inline and have no line box to align within. For centering a block, the answer today is Flexbox — display: flex; align-items: center; — not this property.

Where it genuinely shines is the small stuff: nudging an inline SVG icon so it sits on the text baseline instead of below it (vertical-align: middle or text-bottom usually does it), positioning sub- and superscripts, and aligning the contents of table cells with top, middle or bottom. Used in those contexts, it is exactly the right tool.

Syntax

/* line an icon up with its label */
.icon {
  vertical-align: middle;
}

Values

The vertical-align property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`baseline`	Aligns the element's baseline with the parent's baseline. The default.
`middle`	Roughly aligns the middle of the element with the middle of the line.
`top, bottom`	Aligns the top or bottom with the line box or table cell.
`text-top, text-bottom`	Aligns with the top or bottom of the parent's text.
`sub, super`	Subscript and superscript positions.

Example

Live example

<style>
  p { font: 18px system-ui, sans-serif; margin: 0 0 10px; }
  .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #1c7ce9; }
  .base .dot { vertical-align: baseline; }
  .mid .dot { vertical-align: middle; }
</style>
<p class="base">Baseline <span class="dot"></span> sits low</p>
<p class="mid">Middle <span class="dot"></span> lines up</p>

Best practices

Use vertical-align for inline content — icons, sub/superscripts — and for table-cell alignment, which is where it works.
To vertically center a block or flex child, use align-items: center on a flex container instead.
For inline icons that sit too low, try vertical-align: middle or text-bottom to bring them onto the text line.
In table layouts, set it on the cell (td) to align its contents top, middle or bottom.

Frequently asked questions

Why does vertical-align: middle not center my div?

Because vertical-align only works on inline, inline-block and table-cell elements, not block boxes. To center a block, use Flexbox: display: flex; align-items: center;.

How do I vertically align an icon with text?

Set vertical-align: middle (or text-bottom) on the inline icon so it lines up with the adjacent text rather than sitting below the baseline.

How do I vertically center content in a table cell?

Set vertical-align: middle on the <td>. In table cells the property aligns the cell's content top, middle or bottom.

What is the default value of vertical-align?

It is baseline, which lines the element's baseline up with its parent's baseline.

user-select visibility

References