Свойство 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