align-items: baseline aligns participating flex or grid items using their first baselines where the layout can establish a shared baseline. This differs from center, which aligns box centers. Font metrics, line wrapping, and writing modes affect the resulting position, so a baseline rule should be checked with the actual text and fonts.
Make this comfortable
CSS baseline alignment: line up mixed text by its reading edge
When to use it
An incident header places a large numeric count beside a smaller status label. Center alignment makes the characters appear to sit at different reading levels even though their boxes are centered; first-baseline alignment keeps their primary text lines together. The gap remains explicit, and wrapping is allowed rather than forcing a long translated label off screen. Test a one-line label, a two-line translation, an alternate font, and 200% zoom. If the label wraps, only its first line shares the intended baseline; decide whether that still reads correctly. A badge icon has no natural text baseline in the same sense, and may need its own alignment decision. Avoid absolute offsets tuned to one font file. For vertical writing or mixed scripts, verify the chosen writing mode before assuming the western horizontal baseline is the desired visual reference.
.incident-heading { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55rem; row-gap: .25rem; }
.incident-heading__count { font: 700 2.2rem/1 system-ui; }
.incident-heading__label { font: 600 1rem/1.4 system-ui; max-inline-size: 24ch; }Cost and verification
Baseline alignment adds negligible work relative to ordinary layout. The real cost is maintaining visual accuracy across fonts, translations, and wrapping. A fallback font with different ascent or descent metrics can shift the perceived result, so test the actual loading path rather than only a design mockup. Flex wrapping creates multiple lines; alignment happens within each line, not across an entire multi-line header as one unit. If the numeric count is spoken without context, give it a meaningful nearby label in the HTML. CSS cannot create that relationship. Avoid using transform or relative positioning to compensate for a mismatch that baseline alignment solves more clearly.
Common Mistakes
- Do not assume box centering aligns glyph baselines.
- Do not expect one baseline rule to align every wrapped line together.
- Do not use a positional nudge tied to one font's metrics.
Connected lessons
css
reference
web