Vertical-align property
Last updated: 2026-09-13
vertical-align Vertical-align property
The vertical-align CSS property controls the vertical alignment of inline elements or the content inside table cells. It supports keywords such as top, middle, and baseline as well as length and percentage values, and is commonly used to align icons with text, nudge inline elements, or position table cell content. Note that vertical-align has no effect on block-level elements.
| Category | |
|---|---|
| Initial Value | baseline |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <length> | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
baseline | sub | super | text-top | text-bottom | middle | top | bottom | Keyword | Vertical alignment keywords |
<length> | <percentage> | Type | A precise offset value as a length or percentage |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| vertical-align | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： vertical-align aligns relative to the current line box or table cell, not to the parent container as a whole.
Warning： vertical-align has no effect on block-level elements such as div or p. To vertically center block content, use Flexbox or Grid.
❓ FAQ
QWhy doesn't vertical-align: middle center an element vertically?
Avertical-align: middle aligns the element's vertical midpoint with the parent's baseline plus half the x-height; it is not centering relative to the parent container. It is meant for fine-tuning inline elements, not as a real vertical-centering solution.
QWhy is there a gap below inline images inside a paragraph in HTML?
AImages are inline by default, and the line reserves space for descenders below the baseline. Setting vertical-align: bottom, middle, or top — or display: block — removes that gap.
QHow do I vertically center an inline image with adjacent text using CSS?
AWrite vertical-align: middle on the image or the adjacent inline element and they will look centered with the text. For stricter alignment, make the image display: inline-block with vertical-align: middle, or use Flexbox with align-items: center.
QWhy is the vertical-align property ignored on div and p elements?
Avertical-align only applies to inline elements, inline-block elements, and table cells (td/th), aligning them relative to the baseline of their line; block-level elements like div and p are unaffected. For vertical centering of block elements, use Flexbox or Grid.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
