The lh Unit Solves Icon and Label Alignment
Better Icon and Label Alignment
When list items have icons and text wraps, centering the icon looks wrong. Using align-items: start causes the icon to sit too high because of the font's line height. The fix: calculate the offset with calc((1lh - icon-size) / 2) and apply it via transform: translateY. This works for any icon size, font size, or container width. For pseudo-element icons, also set flex-shrink: 0, aspect-ratio: 1, and height: auto.
If we can get the line-height value and we have a known icon size, we can make the offset relative to them.
- pveierland
There's new CSS capabilities [0] that can help solve this problem better now via alignment-baseline [1] and text-box-trim [2].
[0] https://www.w3.org/TR/css-inline-3/#leading-trim
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
- systoll
`list-style-image` seems like a more straightforward solution to the same problem.
Or a negative text-indent, if you want arbitrary content rather than just a tick.
- LinguaBrowse
Playing around with the demos, none of the solutions seem very centred at all?
I think the lh unit is surely part of the puzzle, but something more is needed. It assumes that the ascent and descent are symmetrical, for one thing.