mefody.dev

Вертикальное выравнивание через cap-height



Задача: выровнять иконку или картинку по центру относительно строки текста.



Кажется, всё просто: добавляем vertical-align: middle, коммитим, пушим, деплоим, профит. Но есть нюанс.



Дело в том, что vertical-align: middle выравнивает элемент относительно высоты строчной буквы x. Это так называемая x-height. И если текст у вас состоит только из строчных букв, то задача как будто решена, иконка действительно будет выровнена относительно текста. Но сомневаюсь, что у вас именно такой текст.



Рома Комаров показывает, как можно починить выравнивание для текстов с прописными буквами. В CSS не так давно появилась единица измерения cap, от английского capital — прописная. Это высота прописной буквы шрифта, cap-height. Прелесть в том, что браузер может сам высчитать эту высоту для шрифта, потому что он очень неплохо справляется с рендерингом текста. А это значит, что мы можем комбинировать x-height и cap-height, чтобы посчитать, какой отрицательный margin добавить иконке сверху: margin-top: calc(1ex - 1cap). В таком случае текст будет выровнен красиво по центру иконки или картинки.



Единица измерения cap появилась в Chrome 117, Safari 17.2 и Firefox 97. То есть пока ещё не самая высокая браузерная поддержка (чуть ниже 70% по данным caniuse на момент публикации поста). Для старых браузеров Рома предлагает фолбек на CSS-переменных, если у вас есть возможность достать параметры шрифта из самого шрифта. Пример кода — в статье. Ссылка на инструмент для извлечения метрик шрифта — тоже.



Когда вам в очередной раз зададут вопрос про вертикальное выравнивание блоков по центру при помощи CSS, сможете сделать ваш ответ ещё интереснее.



https://blog.kizu.dev/cap-height-align/