alignment-baseline
The alignment-baseline CSS property sets which baseline of an element is aligned with the corresponding baseline of its parent. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The alignment-baseline CSS property sets which baseline of an element is aligned with the corresponding baseline of its parent. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 79 | 149 | 5.1 | 18 | 5 | |
alphabetic | 1 | 79 | | 5.1 | 18 | 5 |
baseline | 1 | 79 | 149 | 5.1 | 18 | 5 |
central | 1 | 79 | | 5.1 | 18 | 5 |
ideographic | 1 | 79 | | 5.1 | 18 | 5 |
mathematical | 1 | 79 | | 5.1 | 18 | 5 |
middle | 1 | 79 | 149 | 5.1 | 18 | 5 |
text-after-edge | 1 | 79 | | 5.1 | 18 | 5 |
text-before-edge | 1 | 79 | | 5.1 | 18 | 5 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
tspan {
alignment-baseline: central;
}
.math-symbol {
alignment-baseline: mathematical;
}Live demo
Use cases
Refine text rhythm
Use alignment-baseline to make long-form reading or dense interface copy easier to scan and understand.
Support language nuances
Apply alignment-baseline when different writing systems or typographic conventions need more deliberate control.
Cautions
- Test alignment-baseline in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.
Related links
Powered by web-features