Справочник · CSS

vertical-align: выравнивание в строке, не в блоке

Свойство работает у строчных элементов и ячеек таблицы. Блок в обычной колонке оно не центрирует.

Как это работает

Частый промах — пытаться поставить карточку по центру секции через vertical-align. Для этого есть flex или grid. Внутри строки vertical-align: middle полезен иконке рядом с текстом. В таблице значения middle и top выравнивают содержимое ячеек.

.icon { vertical-align: middle; }
td { vertical-align: top; }

Когда использовать

Иконка у текста и содержимое ячеек. Колонку страницы выравнивай флексом.

Частые ошибки

• Карточка не встала по центру экрана, потому что это не строчный контекст.
• Иконка прыгает относительно подписи.
• В таблице текст разной длины прилип к разным краям.