Post

While working on a project, I paused a bit to style an icon + text. When the text is short, the icon is vertically centered. If the text wraps, the icon is aligned with the first line. ishadeed.com/article/alig... This is a result of using lh, aspect-ratio, height: auto, flexbox and more.

15/9/26, 5:39 pm8 reposts76 likes

Marcin Wichary

@aresluna.org

16 Sept

This is great (and a bit sad seeing how complex this stuff is in CSS).

Ahmad Shadeed

@ishadeed.com

16 Sept

Thanks! And yes, a simple thing should be straightforward to make.

Jeff (2026)

@tidaltheory.io

15 Sept

Nice! I came up with a slightly different solution but I want to dig in to yours to see if it can be improved. Still thinking about a good name for this pattern…

tidaltheory.ioA flexible solution for centering icons & textModern CSS units provide a solution to a long-standing layout pattern.

Jeff (2026)

@tidaltheory.io

15 Sept

Also, I need to update my post to use live examples like you’ve got!

Ahmad Shadeed

@ishadeed.com

16 Sept

Nice one! Thanks for sharing.

Nick Williams

@wicky.nillia.ms

16 Sept

Nice, this is such a difficult thing to get right in all cases. But I really wish CSS had something for this out of the box. Literally everyone encounters this issue, it should be easy to do