alignment-baseline
The alignment-baseline CSS property specifies the specific baseline used to align the box's text and inline-level contents. Baseline alignment is the relationship among the baselines of multiple alignment subjects within an alignment context. When performing baseline alignment, the alignment-baseline property value specifies which baseline of the box is aligned to the corresponding baseline of its alignment context.
Note: The alignment-baseline property only has an effect on inline-level boxes, flex items, grid items, table cells, and the <text>, <textPath>, and <tspan> SVG elements. If present, it overrides the shape's alignment-baseline attribute.
In an inline formatting context, inline-level box fragments and glyphs share an alignment context established by their parent inline box fragment along its inline axis. In SVG text layout, these values instead specify the baseline that is aligned to the SVG current text position.
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 |
Syntax
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.