Вертикальное выравнивание в CSS: полное руководство по vertical-align

Вертикальное выравнивание в CSS часто вызывает вопросы: когда работает vertical-align, какие значения использовать и почему элемент не сдвигается так, как ожидается. В этом руководстве я переведу и расширю исходный материал, добавлю практические советы, тесты приёмки и список альтернатив — всё это в понятной, краткой форме.

Что такое vertical-align и где он работает

vertical-align — это свойство CSS для управления вертикальным положением inline-уровневых элементов и ячеек таблиц ( и ). Оно не влияет на большинство блочных элементов (div, h1, p и т. п.), пока вы явно не измените их display на inline или inline-block.

Короткое определение: вертикальная линия базовой строки (baseline) — это воображаемая линия, по которой выстраиваются буквы и inline-элементы внутри строки. vertical-align сдвигает элемент относительно этой строки или относительно самого родителя (в зависимости от значения).

Важно: vertical-align действует внутри line box (контейнера строки). Если элементы находятся в разных строках, vertical-align не изменит их относительное расположение.

Основные типы значений vertical-align

vertical-align принимает три типа значений: ключевые слова, проценты и длины. Каждое значение определяет позицию baseline целевого элемента относительно baseline родителя или относительно высочайшего/низочайшего элемента в строке.

Основные значения:

• baseline — элемент выровнен по базовой линии родителя.
• top — верх целевого элемента выровнен с верхом самого высокого элемента в текущей строке.
• middle — центр целевого элемента выровнен по вертикали в строке (не буквально geometric center для всех случаев, но близко к центру line box).
• bottom — низ целевого элемента выровнен с низом самого низкого элемента в строке.
• sub — позиция для нижнего индекса (subscript baseline) родителя.
• super — позиция для верхнего индекса (superscript baseline) родителя.
• text-top — выровнять по верху шрифта родителя (верхняя граница шрифта).
• text-bottom — выровнять по низу шрифта родителя.
• процент (например, 20%) — базовая линия целевого элемента смещается относительно baseline родителя на указанный процент высоты line box; может быть отрицательным.
• длина (например, 10em, 20px) — базовая линия смещается на указанную длину; также допускаются отрицательные значения.

Базовый HTML-шаблон (пример)

  
  
  
     
     
     
    
     
    
     
  
    
  
    
  
    
   Google Search  
    
     
    
     
    
   
  
       
  
           
Scenery
  
           
Discription
  
       
  
        
       
  
           
Forest
  
           
Lorem ipsum dolor sit amet.
  
       
  
        
       
  
           
Ocean
  
           
Lorem ipsum dolor sit amet.
  
       
  
   
  
    
  
    
  
    
  
  

Этот код создаёт простую страницу с ссылкой, изображением, встраиваемым видео и таблицей.

Как вертикально выровнять текст

По умолчанию большинство текстовых элементов (h1–h6, p, li и т. п.) являются блочными. Их нельзя вертикально выровнять через vertical-align, пока вы не поменяете display на inline или inline-block.

Теги и — inline по умолчанию, поэтому поддерживают vertical-align. Чтобы выровнять текст, назначьте нужное значение vertical-align.

Использование vertical-align: top для текста

a {  
   vertical-align: top;  
}  

Этот стиль выровняет верх текста по верху самого высокого элемента в строке.

Использование процентного значения для текста

a {  
    vertical-align: -50%;  
}

vertical-align: -50% сдвинет базовую линию текста на 50% вниз относительно базовой линии родителя. Это полезно для тонкой настройки компенсации соотношения высот соседних inline-элементов.

Использование длины для текста

a {  
    vertical-align: 90px;  
}  

vertical-align с длиной (например, 90px) перемещает базовую линию на фиксированное расстояние. Это удобно, если нужен жёсткий, предсказуемый сдвиг.

Совет: длины зависят от размера шрифта и плотности интерфейса. Для адаптивных интерфейсов предпочитайте em/rem или проценты.

Как вертикально выровнять изображения

Тег — inline-элемент. vertical-align отлично работает с изображениями.

Использование vertical-align: super для изображения

img {  
    vertical-align: super;  
}  

super поднимает изображение к верхней (superscript) базовой линии родителя.

Использование процентного значения для изображения

img {  
    vertical-align: 25%;  
}  

25% сдвигает базовую линию изображения на четверть высоты line box вверх.

Использование длины для изображения

img {  
    vertical-align: 5px;  
}  

5px поднимет базовую линию изображения на 5 пикселей относительно baseline родителя.

Как вертикально выровнять встроенные медиа (видео, iframe)

Видео и iframe в HTML обычно являются inline-элементами (если к ним не применён display:block). vertical-align работает так же, как с изображениями.

Использование sub для видео

video {  
    vertical-align: sub;  
}  

sub опустит видео к нижней (subscript) базовой линии родителя.

Использование процентного значения для видео

video {  
    vertical-align: -25%;  
}  

-25% опустит базовую линию видео на 25% ниже baseline родителя.

Использование длины для видео

video {  
    vertical-align: -5px;  
}  

-5px опустит базовую линию на 5 пикселей.

Вертикальное выравнивание в таблицах

Ячейки таблицы (, ) ведут себя как inline/inline-block относительно содержимого. Поэтому vertical-align применим к содержимому ячейки и задаёт позицию внутри высоты строки.

top для данных таблицы

td {  
    height: 40px;  
    vertical-align: top;  
}  

Устанавливает высоту ячейки 40px и выравнивает содержимое по верху.

middle для данных таблицы

td {  
    height: 40px;  
    vertical-align: middle;  
}  

Центрирует содержимое ячейки по вертикали.

bottom для данных таблицы

td {  
    height: 40px;  
    vertical-align: bottom;  
}  

Выровняет содержимое по низу ячейки.

Когда vertical-align не поможет

• Элемент — блочный (display: block) и вы не меняли display на inline/inline-block.
• Элемент и соседние находятся в разных строках (line boxes). vertical-align действует только внутри одной строки.
• Если вам нужно выравнивание по центру контейнера с динамической высотой — лучше использовать flexbox или grid.

Альтернативы vertical-align

1. Flexbox: идеально для центрирования по вертикали и горизонтали в контейнере.

.container {  
  display: flex;  
  align-items: center; /* вертикальное выравнивание */  
  justify-content: center; /* горизонтальное выравнивание */  
}

2. Grid: мощнее при создании сложных макетов.

.container {  
  display: grid;  
  place-items: center;  
}

3. line-height: простое вертикальное центрирование однострочного текста внутри элемента.

4. transform: translateY(…) для визуального сдвига (удобно для анимаций).

Выбор метода зависит от задачи: для выравнивания inline-элементов рядом друг с другом vertical-align удобен; для выравнивания содержимого внутри блока лучше flex/grid.

Ментальные модели и эвристики

• Line box = контейнер строки. vertical-align управляет позицией элемента внутри этого контейнера.
• Baseline — ключевая линия для текста. Многие значения (проценты и длины) сдвигают базовую линию элемента.
• Если соседний элемент выше, top и bottom ориентируются по экстремумам в строке, а не по родительскому контейнеру.

Быстрая шпаргалка (cheat sheet)

• Для inline-элементов используйте vertical-align напрямую.
• Для блочных элементов примените display: inline-block.
• Для гибкого центрирования в контейнере — flexbox или grid.
• Процент = относительное смещение baseline; длина = фиксированное смещение.

Ролевые чеклисты

Разработчик front-end:

• Проверить, inline ли элемент; если нет — изменить display.
• Проверить соседние элементы в одной строке.
• Использовать em/rem вместо px для отзывчивости.
• Тестировать в нескольких браузерах и размерах шрифта.

Дизайнер:

• Уточнить, нужно ли визуальное выравнивание по визуальному центру или по baseline.
• Предпочитать относительные единицы для адаптивности.

QA-инженер:

• Написать тесты, проверяющие позицию элементов при разных размерах окна и шрифта.
• Проверить доступность: футеры/попапы не должны смещаться неожиданно.

Критерии приёмки

• Элемент A выровнен вертикально с элементом B в одном line box при заданном значении vertical-align.
• При смене размера шрифта на 200% относительное положение сохраняется (если использованы em/rem).
• Если применён display:inline-block к блочному элементу, vertical-align должен иметь ожидаемый эффект.

Мини-методология для отладки выравнивания

1. Убедиться, что элементы находятся в одном line box.
2. Включить границы и фон для отладки (outline, background-color).
3. Проверить display и высоты соседних элементов.
4. Попробовать временно заменить vertical-align на transform: translateY(…) для проверки визуального результата.

Примеры тест-кейсов

• Тест 1: элемент inline и соседнее изображение — применить vertical-align: middle и проверить, что визуальные центры совпадают.
• Тест 2: установить vertical-align: -50% и убедиться, что элемент опустился относительно baseline.
• Тест 3: для таблицы проверить top/middle/bottom при высоте ячейки 60px.

Совместимость и миграция

vertical-align поддерживается во всех современных браузерах и старых версиях. Однако поведение вокруг baseline и text-top/text-bottom может выглядеть немного иначе при разных шрифтах и способах рендеринга. Для кроссбраузерности тестируйте ключевые комбинации в целевых браузерах и при разных DPI.

Риск и способы снижения

• Риск: неправильный выбор единиц (px) ломает макет при масштабировании. Митигирование: использовать em/rem или проценты.
• Риск: непредсказуемое поведение при разных шрифтах. Митигирование: задавать line-height и тестировать.

Небольшая Decision-диаграмма (Mermaid)

flowchart TD
  A[Нужен вертикальный сдвиг?] --> B{Элемент inline?}
  B -- Да --> C{Выравнивание внутри строки?}
  B -- Нет --> D[Сделать display:inline-block]
  C -- Да --> E[Использовать vertical-align]
  C -- Нет --> F{Выравнивание внутри блока?}
  F -- Да --> G[Использовать flexbox или grid]
  F -- Нет --> H[Использовать padding/line-height/transform]
  D --> C

Короткая сводка по использованию

• vertical-align управляет положением inline-элементов в контексте line box.
• Используйте ключевые слова для быстрых решений (top, middle, bottom), проценты и длины для точной настройки.
• Для блоков и сложных макетов используйте flexbox/grid.

Глоссарий — одно предложение на термин

• Baseline: воображаемая линия, по которой выстраиваются символы и inline-элементы.
• Line box: контейнер, представляющий одну строку inline-элементов.
• inline-block: режим отображения, который сочетает блоковую модель и inline-поведение.

Контрольный список при сдаче задачи

• Элемент отображается в нужной строке.
• vertical-align применён к inline/inline-block/табличным ячейкам.
• Используются адаптивные единицы (em/rem) там, где это важно.
• Проверено на основных браузерах.

Итог

vertical-align — мощный, но специфичный инструмент для выравнивания inline-элементов и содержимого ячеек таблицы. Для большинства современных макетов комбинируйте его с display: inline-block и используйте flexbox или grid там, где требуется более предсказуемое вертикальное центрирование.

Воспользуйтесь приведёнными чеклистами и тест-кейсами при разработке и отладке. Это ускорит поиск причин, почему элемент не выстраивается так, как вы ожидали.