Better Icon and Label Alignment

pveierland · 2026-09-18T02:51:32

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...

echoangle · 2026-09-18T11:08:47

Is it weird that I like the version where the icon is centered on the multiple lines?

systoll · 2026-09-18T07:40:55

`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 · 2026-09-18T06:35:51

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.

gfat · 2026-09-18T02:47:57

Recently found the lh unit approach. It’s elegant for centering icons along the first line in dynamic, sometimes wrapping text.

lenkite · 2026-09-18T05:22:19

God, this was so complicated to understand just to get an icon aligned properly with multi-line text. Someone needs to re-design CSS from scratch for average human brains. Its has become a rube goldberg machine of complexity.