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

CSS предоставляет несколько свойств для выравнивания. Свойство text-align ограничено блочными элементами и ячейками таблицы и описывает горизонтальное выравнивание. В отличие от него, vertical-align применяется только к inline-элементам и ячейкам таблицы ( и ).

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

Основные типы и идея baseline

Коротко: baseline — это воображаемая линия, на которой «сидят» символы шрифтов. При работе с inline-элементами vertical-align смещает базовую линию целевого элемента относительно базовой линии строки или относительно высоты соседних элементов.

vertical-align принимает три типа значений:

• ключевые слова (например, baseline, top, middle, bottom, sub, super, text-top, text-bottom),
• процентные значения (например, 20% или -50%),
• длины (например, 10px, -0.5em).

Ниже — основные значения и короткое пояснение:

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

Важно: проценты и длины смещают базовую линию элемента, а не его верх/низ напрямую, поэтому визуальные эффекты зависят от высоты шрифта и размера соседних inline-элементов.

Базовый HTML-шаблон для экспериментов

Ниже упрощённый HTML для локального тестирования — откройте файл в браузере и применяйте разные vertical-align стили.

    
    
    

    

    






    Google Search

    

    

    

        

            
Scenery
            
Description
        

        

            
Forest
            
Lorem ipsum dolor sit amet.
        

        

            
Ocean
            
Lorem ipsum dolor sit amet.
        
    

Браузер отобразит страницу с ссылкой, изображением, видео и таблицей — это удобная тестовая сцена для демонстраций vertical-align.

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

По умолчанию многие текстовые элементы (h1–h6, p, li и пр.) — блочные. Прямого вертикального выравнивания у блочных элементов нет: сначала нужно перевести их в inline или inline-block с помощью display.

Однако некоторые текстовые теги (a, span) уже inline и сразу поддерживают vertical-align.

Пример: выровнять ссылку по верху строки

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

a {
  vertical-align: top;
}

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

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

a {
  vertical-align: -50%;
}

Здесь текст смещается так, что его базовая линия будет на 50% ниже базовой линии родителя — визуально это опускает элемент относительно изображения и видео в той же строке.

Чтобы поднять элемент над базовой линией, используйте положительные проценты.

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

a {
  vertical-align: 90px;
}

Длина смещает базовую линию на фиксированную величину. В примере базовая линия элемента будет на 90px выше базовой линии родителя.

Совет: избегайте больших фиксированных смещений (px) в адаптивной верстке; лучше использовать em/rem или проценты.

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

Тег по умолчанию inline, поэтому vertical-align с ним работает «из коробки».

Пример: значение super для изображения

img {
  vertical-align: super;
}

super позиционирует изображение по надстрочной линии родителя — изображение визуально поднимается выше базовой линии.

Процентное смещение у изображения

img {
  vertical-align: 25%;
}

25% поднимает базовую линию изображения на четверть высоты строки относительно базовой линии родителя — эффект похож на super, но настраиваемый.

Длина для изображений

img {
  vertical-align: 5px;
}

Это поднимает базовую линию изображения на 5 пикселей — мелкая настройка, полезна для точной подгонки пиксельных макетов.

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

Видео и iframe — inline-элементы, поэтому vertical-align применим. Это удобно, когда рядом располагаются текст, иконки или изображения.

Пример: sub для видео

video {
  vertical-align: sub;
}

sub опускает видео по нижней линии подстрочного текста — полезно, когда нужно немного опустить медиа в строчном ряду.

Процентное смещение для видео

video {
  vertical-align: -25%;
}

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

Длина для видео

video {
  vertical-align: -5px;
}

Небольшое отрицательное смещение опустит видео на 5 пикселей.

Таблицы: выравнивание внутри ячеек

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

top в ячейке

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

Выравнивает содержимое ячеек по верхнему краю строки.

middle в ячейке

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

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

bottom в ячейке

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

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

Когда vertical-align не работает — частые причины

• Элемент является блочным (display:block). Решение: сделать display:inline или inline-block.
• Соседние элементы ведут себя как inline-block с разной высотой шрифтов — визуальная площадка влияет на результат.
• Ожидание, что vertical-align выровняет контейнер целиком по высоте родителя (это не так): vertical-align смещает базовую линию, а не сам блок в макете.
• Использование vertical-align на flex-контейнерах или grid-ячейках. Для flex/grid применяйте align-items, align-self или place-items.

Важно: vertical-align пригоден для строчных контекстов. Для блочных и современных макетов чаще используют Flexbox и Grid.

Альтернативы и лучшие практики

• Для выравнивания целых блоков по вертикали используйте Flexbox: display:flex; align-items:center; (для горизонтального/вертикального центрирования гибко).
• Для центрирования одиночного блока внутри родителя часто удобнее сочетание display:grid и place-items:center.
• Для текста в кнопке или в ячейке таблицы можно комбинировать line-height и vertical-align для тонкой настройки.

Когда использовать vertical-align:

• При выравнивании иконок/картинок рядом с текстом.
• При работе с inline-media (audio, video, iframe) в строчном контексте.

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

• Для центровки блочных элементов внутри контейнера (используйте Flexbox/Grid).

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

• “Baseline-first”: думайте о baseline как об опорной линии; vertical-align смещает эту опорную линию.
• “Inline context only”: если элемент не inline/inline-block — vertical-align не даст ожидаемого эффекта.
• “Small tweaks with lengths, coarse with keywords”: ключевые слова дают быстрый эффект, проценты и длины позволяют тонкую подгонку.

Мини‑шпаргалка: значения и когда применять

• baseline — вернуть к базовой линии (по умолчанию для текста).
• top / bottom — привязать к экстремумам строки (подходит для иконок).
• middle — быстрый способ визуального центрирования в строке.
• sub / super — для индексных и надстрочных эффектов.
• проценты / длины — когда нужна тонкая настройка между словами “верх/середина/низ”.

Быстрые паттерны кода

• Сделать блочный элемент вести себя как inline-block:

.box {
  display: inline-block;
  vertical-align: middle; /* теперь можно центрировать относительно соседей */
}

• Центрирование значка и строки текста:

.icon {
  vertical-align: middle;
}
.text {
  display: inline-block;
  vertical-align: middle;
}

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

• Элемент корректно выровнен во всех целевых браузерах и состояниях (hover, active).
• На 320–1920px поведение не ломается (проверка на мобильных и десктопных вьюпортах).
• Нет неожиданных смещений при изменении размера шрифта (особенно при использовании процентов).
• При использовании vertical-align применены fallback-стили для старых браузеров, если критично.

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

Для frontend‑разработчика:

• Проверить display элемента (inline/inline-block).
• Убедиться, что соседние inline элементы имеют ожидаемые высоты шрифта.
• Использовать проценты/length для точной подгонки.
• Тестировать в основных браузерах и на мобильных.

Для дизайнера/верстальщика:

• Предоставить эталонный макет с указанием желаемой опорной линии (baseline).
• Решить, нужен ли pixel-perfect vs адаптивное выравнивание.
• Согласовать fallback‑вариант (например, align-items в flex для блочных контейнеров).

Decision flow: когда применять vertical-align

flowchart TD
  A[Нужно вертикально выровнять элемент?] --> B{Элемент блочный?}
  B -- Да --> C[Использовать Flexbox/Grid или display:inline-block + vertical-align]
  B -- Нет --> D[Элемент inline/inline-block — применять vertical-align]
  C --> E{Требуется тонкая подгонка?}
  D --> E
  E -- Да --> F[Использовать проценты/длины]
  E -- Нет --> G[Использовать ключевые слова 'top/middle/bottom']

Факто‑бокс: ключевые моменты

• Поддержка: vertical-align поддерживается всеми современными браузерами; это свойство старой школы CSS и остаётся актуальным для inline-контента.
• Типы значений: ключевые слова, проценты, длины.
• Контекст применения: inline, inline-block, table-cell.
• Основная альтернатива: Flexbox и Grid для блочной компоновки.

Тестовые случаи / приёмка

1. Поставить изображение, текст и видео в одну строку и применить vertical-align:middle — визуально все должны быть центрированы.
2. Поменять font-size родителя — убедиться, что процентные значения корректно смещают baseline.
3. Применить отрицательное значение / отрицательную длину — проверить, что элемент опускается, а не обрезается.
4. Вложенные inline-block с margin/padding — убедиться, что боковые эффекты не нарушают выравнивание.

Accessibility и responsive соображения

• Не используйте vertical-align для управления расположением критического контента, если при изменении фона/браузера он может перекрыться. В таких случаях лучше использовать доступные макеты Flex/Grid.
• При использовании процентов и em учитывайте масштабирование текста и пользовательские настройки шрифта.

Короткая сводка: что помнить

• vertical-align — для inline контекста (текст, изображения, встроенные медиа, ячейки таблицы).
• Для блочных элементов сначала делайте display:inline-block.
• Для центрирования блоков лучше использовать Flexbox или Grid.
• Для точной подгонки используйте проценты или относительные единицы (em/rem).

Важно: vertical-align смещает базовую линию элемента, а не всегда видимые верх/низ напрямую. Проверяйте на реальных примерах.

Основные рекомендации: тестируйте на разных размерах шрифта и в целевых браузерах; используйте ключевые слова для быстрых результатов и проценты/длины для полировки.

Конец руководства — что дальше

Попробуйте применить vertical-align в простом проекте: выровняйте иконки и подписи в наборе карточек, настройте позиционирование миниатюр рядом с текстом, и убедитесь, что при смене font-size элементы остаются читаемыми. Если нужно выровнять целые блоки — переходите на Flexbox или Grid.