Выравниваем иконки в списках 🎯
Как выровнять иконку относительно первой строки текста с помощью единицы lh и CSS calc().
Ахмад Шадид разбирает частую проблему верстки: у нас есть список с иконками, и нужно аккуратно выровнять иконку относительно первой строки текста.
В чём сложность?
- Если задать
align-items: center, всё выглядит отлично… пока текст помещается в одну строку. Но стоит тексту перенестись, как иконка съезжает в центр всего текстового блока. - Логичный шаг — сменить на
align-items: start. Но тут вмешивается строчный бокс (line box): из-за встроенных в шрифт отступов сверху и снизу иконка прилипает к самому верху и оказывается выше первой буквы.
Как решить это элегантно?
Использовать относительную единицу измерения lh (высота строки) и математику в CSS.
Схема следующая:
- Выравниваем элементы по верху (
align-items: start). - Смещаем иконку вниз на половину разницы между высотой строки и размером самой иконки:
translate: 0 calc((1lh - var(--icon-size)) / 2);Этот хак универсален: он автоматически подстраивается под изменения font-size или размера иконки и не ломается при адаптиве.
А если иконка на псевдоэлементе?
Там возникают свои нюансы: flex-элементы по умолчанию сжимаются и растягиваются. Чтобы сохранить пропорции иконки-фона, псевдоэлементу понадобится пара дополнительных свойств:
.list-item::before {
content: "";
flex-shrink: 0;
width: var(--icon-size);
height: auto;
aspect-ratio: 1;
}