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

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

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.

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

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

undefined

[dead]

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.