vertical-align

Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.

Краткая информация

Значение по умолчанию baseline
Наследуется Нет
Применяется К строчным элементам или ячейкам таблицы
Анимируется Да

Синтаксис

vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top| 
  <размер> | <проценты>

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

Значение Описание Вид
baseline Выравнивает базовую линию блока по базовой линии родителя. Если у блока нет базовой линии, то за неё принимается нижняя граница. Заголовок Текст
bottom Выравнивает низ блока по нижней части строки. Заголовок Текст
middle Выравнивает вертикальную среднюю точку блока по базовой линии родительского блока плюс половина высоты буквы «x». Заголовок Текст
sub Опускает базовую линию блока вниз для создания нижнего индекса. Не оказывает влияние на размер текста. Заголовок Текст
super Поднимает базовую линию блока вверх для создания верхнего индекса. Не оказывает влияние на размер текста. Заголовок Текст
text-bottom Нижняя граница элемента выравнивается по нижнему краю содержимого родителя. Заголовок Текст
text-top Верхняя граница элемента выравнивается по верхнему краю содержимого родителя. Заголовок Текст
top Выравнивает верх блока по верхней части строки. Заголовок Текст

В качестве значения также можно использовать проценты, пиксели или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчёт ведётся от значения свойства line-height, при этом 0% аналогично значению baseline.

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.

baseline
Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
bottom
Выравнивает по нижнему краю ячейки.
middle
Выравнивает по середине ячейки.
top
Выравнивает содержимое ячейки по её верхнему краю.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vertical-align</title> <style> .tex { font-size: 2rem; } .tex sub { vertical-align: sub; font-size: 1.8rem; } .tex sup { vertical-align: 5px; font-size: 1.6rem; } </style> </head> <body> <div class="tex"> T<sub>E</sub>X и L<sup>A</sup>T<sub>E</sub>X </div> </body> </html>

Результат данного примера показан на рис. 1.

Применение свойства vertical-align

Рис. 1. Применение свойства vertical-align

Объектная модель

Объект.style.verticalAlign

Спецификация

Спецификация Статус
CSS Inline Layout Module Level 3 Рабочий проект
CSS Level 2 Revision 1 (CSS 2.1) Рекомендация
CSS Level 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

4 12 1 4 1 1
1 1 4 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич