skip to main content

vertical-align

css

Кратко 🔗

Свойство vertical-align выравнивает текстовые элементы по вертикали относительно друг друга.

🤖 Для простого текста это не особо актуально, то вот для строчно-блочных (inline-block) элементов это свойство может быть очень полезным.

Пример 🔗

Пусть у нас на странице есть три строчно-блочных элемента. Для объяснения работы свойства vertical-align они будут разной высоты:

HTML

<div class="parent">
<div class="element small"></div>
<div class="element medium"></div>
<div class="element big"></div>
</div>

CSS

.element {
display: inline-block;
width: 50px;
height: 50px;
background-color: white;
}

.medium {
height: 100px;
}

.big {
height: 150px;
}

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

CSS

.element {
vertical-align: top;
}

Как это понять 🔗

С английского языка словосочетание vertical align дословно переводится как вертикальное выравнивание. Что в точности совпадает с ожидаемым результатом от использования этого свойства.

Как пишется 🔗

Значение свойства vertical-align чаще всего задаётся при помощи ключевого слова. Единовременно можно указать лишь одно значение.

Рассмотрим доступные значения на примере с котиком 😍:

  • baseline — значение по умолчанию. Выравниваемый элемент выстраивается по нижней линии текста. Если в родительском элементе нет текста, то элемент выравнивается по нижней границе.
  • top — верхняя граница элемента находится на уровне верхней границы строки.
  • middle — мысленно проведи две вертикальные линии: одну через центр текста, а вторую через центр котика. Текущее значение свойства сопоставляет эти линии. Таким образом элемент выравнивается по центру.
  • bottom — выравнивает нижнюю границу элемента по уровню нижней границы строки.
  • sub — удобное значение, если нужно создать нижний индекс. Например, в химических формулах: H₂O. Опускает базовую линию так, чтобы элемент опустился до уровня нижнего индекса:
  • super — работает почти как sub, только поднимает базовую линию вверх.
  • text-bottom — выравнивает элемент по нижней точке текста с учётом выносных элементов.

    Кот, выравненный по нижней точке текста с помощью значения text-bottom

  • text-top — верхняя часть элемента выравнивается по верхнему краю родителя:

    Кот, выравненный по верхнему краю родителя с помощью значения text-top

Помимо ключевых слов можно использовать числовые значения.

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

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

Подсказки 🔗

💡 Свойство vertical-align применяется к элементам, которые нужно выровнять, а не к родительскому элементу.

💡 На всякий случай: вертикально — это сверху вниз. Слева направо — это горизонтально 😉

💡 Свойство очень пригождается когда нужно выровнять картинку или emoji относительно текста.

В работе 🔗

Алёна,

🛠 Свойство vertical-align каверзное. Многие начинающие разработчики пытаются применить его к родительскому элементу, по аналогии с text-align. И ничего не выходит. Просто запомни, что его нужно применять к тому элементу, который хочется выровнять.

🛠 С появлением флексбоксов выравнивание по вертикали производится при помощи align-items. Поэтому на свойство vertical-align стоит обратить внимание, только если работаешь с вёрсткой на строчно-блочных элементах.

Автор: Алёна,