Кратко
Секция статьи "Кратко"Свойство vertical
выравнивает текстовые элементы по вертикали относительно друг друга.
🤖 Для простого текста это не особо актуально, то вот для строчно-блочных (inline
) элементов это свойство может быть очень полезным.
Пример
Секция статьи "Пример"Пусть у нас на странице есть три строчно-блочных элемента. Для объяснения работы свойства vertical
они будут разной высоты:
<div class="parent"> <div class="element small"></div> <div class="element medium"></div> <div class="element big"></div></div>
<div class="parent"> <div class="element small"></div> <div class="element medium"></div> <div class="element big"></div> </div>
.element { display: inline-block; width: 50px; height: 50px; background-color: white;}.medium { height: 100px;}.big { height: 150px;}
.element { display: inline-block; width: 50px; height: 50px; background-color: white; } .medium { height: 100px; } .big { height: 150px; }
Все три блока по умолчанию выровнялись по нижней границе. Это стандартное поведение. Изменим его и выровняем элементы по верхней границе:
.element { vertical-align: top;}
.element { vertical-align: top; }
Как понять
Секция статьи "Как понять"С английского языка словосочетание vertical align дословно переводится как вертикальное выравнивание. Что в точности совпадает с ожидаемым результатом от использования этого свойства.
Как пишется
Секция статьи "Как пишется"Значение свойства vertical
чаще всего задаётся при помощи ключевого слова. Единовременно можно указать лишь одно значение.
Рассмотрим доступные значения на примере с котиком 😍:
baseline
— значение по умолчанию. Выравниваемый элемент выстраивается по нижней линии текста. Если в родительском элементе нет текста, то элемент выравнивается по нижней границе.
top
— верхняя граница элемента находится на уровне верхней границы строки.
middle
— мысленно проведи две вертикальные линии: одну через центр текста, а вторую через центр котика. Текущее значение свойства сопоставляет эти линии. Таким образом элемент выравнивается по центру.
bottom
— выравнивает нижнюю границу элемента по уровню нижней границы строки.
sub
— удобное значение, если нужно создать нижний индекс. Например, в химических формулах: H₂O. Опускает базовую линию так, чтобы элемент опустился до уровня нижнего индекса:
super
— работает почти какsub
, только поднимает базовую линию вверх.
-
text
— выравнивает элемент по нижней точке текста с учётом выносных элементов.- bottom
-
text
— верхняя часть элемента выравнивается по верхнему краю родителя:- top
Помимо ключевых слов можно использовать числовые значения.
Если указать значение в любых доступных единицах измерения, то положительное значение сдвинет элемент вверх относительно базовой линии, а отрицательно — вниз.
Если указать числовое значение в процентах, то за 0% берётся нижняя граница текста без выносных элементов. То есть аналогично baseline
. Процент рассчитывается от line
родительского элемента.
Подсказки
Секция статьи "Подсказки"💡 Свойство vertical
применяется к элементам, которые нужно выровнять, а не к родительскому элементу.
💡 На всякий случай: вертикально — это сверху вниз. Слева направо — это горизонтально 😉
💡 Свойство очень пригождается когда нужно выровнять картинку или emoji относительно текста.
На практике
Секция статьи "На практике"🛠 Свойство vertical
каверзное. Многие начинающие разработчики пытаются применить его к родительскому элементу, по аналогии с text
. И ничего не выходит. Просто запомни, что его нужно применять к тому элементу, который хочется выровнять.
🛠 С появлением флексбоксов выравнивание по вертикали производится при помощи align
. Поэтому на свойство vertical
стоит обратить внимание, только если работаешь с вёрсткой на строчно-блочных элементах.