Как работает CSS-свойство vertical-align

Development | Amber | Комментировать запись

Свойство vertical-align определяет вертикальное выравнивание содержимого ячейки таблицы или встроенного элемента по отношению к остальной части встроенного потока.

Его можно использовать в двух контекстах:

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

vertical-align может принимать значение в процентах или значение длины (length). Если указано значение длины, элемент выравнивается по указанной длине над базовой линией родителя. Значение % выравнивает элемент на указанный процент выше базовой линии родителя. При этом % является ссылкой на высоту строки.

Вот пример использования данного свойства:

.avatar {
  vertical-align: middle;
}

Также vertical-align поддерживает 8 ключевых слов:

• baseline: значение по умолчанию. Базовая линия элемента выравнивается по базовой линии родителя.
• bottom: нижняя часть элемента выравнивается по всей нижней части строки.
• middle: середина элемента выравнивается по половине x-высоты родительского элемента. X-height — это высота текста без надстрочных и подстрочных символов.
• sub: базовая линия элемента выравнивается по базовой линии нижнего индекса родителя.
• super: базовая линия элемента выравнивается по базовой линии надстрочного индекса родителя.
• text-bottom: нижняя часть элемента равняется по нижней части текста.
• text-top: Верхняя часть элемента равняется по верхней части текста.
• top: верхняя часть элемента выравнивается по верхней части строки.

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

Примеры

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

vertical-align: baseline

The boy sells seashells 🐚 by the seashore.

vertical-align: bottom

The boy sells seashells _🐚 by the seashore.

vertical-align: middle

The boy sells seashells 🐚 by the seashore.

vertical-align: super

The boy sells seashells ^🐚 by the seashore.

Читайте также: Какие бывают единицы измерения в CSS