Aligning icons in lists 🎯
How to align an icon with the first line of text using the lh unit and CSS calc().
Ahmad Shadeed looks at a common layout problem: you have a list with icons and need to align each icon neatly with the first line of text.
What makes this tricky?
- Set
align-items: center, and everything looks great… as long as the text fits on one line. But as soon as it wraps, the icon shifts to the center of the entire text block. - The logical next step is to switch to
align-items: start. But then the line box gets in the way: because of the spacing built into the font above and below the text, the icon sticks to the very top and ends up higher than the first letter.
How do you solve this elegantly?
Use the relative unit lh (line height) and some CSS math.
Here’s the approach:
- Align the items at the top (
align-items: start). - Move the icon down by half the difference between the line height and the size of the icon itself:
translate: 0 calc((1lh - var(--icon-size)) / 2);This trick is universal: it automatically adapts to changes in font-size or icon size and does not break in responsive layouts.
What if the icon is a pseudo-element?
That has its own nuances: flex items shrink and stretch by default. To preserve the proportions of a background icon, the pseudo-element needs a couple of additional properties:
.list-item::before {
content: "";
flex-shrink: 0;
width: var(--icon-size);
height: auto;
aspect-ratio: 1;
}