vertical-align
The vertical-align CSS property sets the vertical alignment of inline, inline-block, and table cell elements. It has no effect on block-level elements.
Overview
The vertical-align CSS property sets the vertical alignment of inline, inline-block, and table cell elements. It has no effect on block-level elements.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
baseline | 1 | 12 | 1 | 1 | 18 | 1 |
bottom | 1 | 12 | 1 | 1 | 18 | 1 |
middle | 1 | 12 | 1 | 1 | 18 | 1 |
sub | 1 | 12 | 1 | 1 | 18 | 1 |
super | 1 | 12 | 1 | 1 | 18 | 1 |
text-bottom | 1 | 12 | 1 | 1 | 18 | 1 |
text-top | 1 | 12 | 1 | 1 | 18 | 1 |
top | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.icon { vertical-align: middle; }
.superscript { vertical-align: super; }
td { vertical-align: top; }Live demo
Use cases
Using vertical-align
The vertical-align CSS property sets the vertical alignment of inline, inline-block, and table cell elements. It has no effect on block-level elements.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features