Свойство vertical-align
Свойство vertical-align управляет вертикальным выравниванием элементов внутри своих родителей. Оно применяется к строчным элементам и к ячейкам таблиц. У него десять возможных значений:
- baseline
- sub
- super
- text-top
- text-bottom
- middle
- top
- bottom
- указание расстояния
- указание процентов
Типографские единицы измерения
Разные значения свойства vertical-align зависят от определённых типографских единиц измерения. Поэтому, чтобы понимать эти значения, для начала нужно понять эти единицы изменения. Существует семь таких единиц, на которых базируются значения свойства.
Типографские единицы измерения
| Цвет | Единица | Описание |
|---|---|---|
| baseline | базовая линия шрифта | |
| subscript baseline | базовая линия нижнего индекса строки | |
| superscript baseline | базовая линия верхнего индекса строки | |
| x height | высота буквы «x» шрифта | |
| line height | высота строки | |
| font top | верхняя линия, верхняя граница шрифта | |
| font bottom | нижняя линия, нижняя граница шрифта |
Значения
Свойство vertical-align устанавливает вертикальное выравнивание строчным элементам или ячейкам таблицы согласно этим типографским единицам. В зависимости от того, к какому элементу они применяются (строчному или к ячейке таблицы), значения могут иметь немного разный смысл.
Baseline (базовая линия)
Значение baseline для строчных элементов выравнивает базовую линию текущего элемента по базовой линии родительского. В примере ниже, у квадрата следующие стили:
Базовая линия для строчных элементов
Для табличных элементов свойство выравнивает содержимое ячейки по базовой линии всех других ячеек в этой строке, выравненных по базовой линии в одном ряду. В примере ниже у всех ячеек в подсвеченной строке установлено значение baseline .
Базовая линия для ячеек таблицы
Значение sub для строчных элементов выравнивает базовую линию текущего элемента по базовой линии нижнего индекса родительского элемента.
Значение sub для строчных элементов
Для табличных элементов это значение приводит к такому же результату, как и baseline .
Super
Значение super для строчных элементов выравнивает базовую линию текущего элемента по базовой линии верхнего индекса родительского элемента.
Значение super для строчных элементов
Для табличных элементов это значение приводит к такому же результату, как и baseline .
Text-top
Значение text-top для строчных элементов выравнивает верхнюю границу текущего элемента по верхней линии шрифта родительского элемента.
Значение text-top для строчных элементов
Для табличных элементов это значение приводит к такому же результату, как и baseline .
Text-bottom
Значение text-bottom для строчных элементов выравнивает нижнюю границу текущего элемента по нижней границе шрифта родительского элемента.
Значение text-bottom для строчных элементов
Для табличных элементов это значение приводит к такому же результату, как и baseline .
Middle
Значение middle для строчных элементов выравнивает середину текущего элемента по середине родительского элемента. Середина родительского элемента подсчитывается следующим образом: берётся высота символа x, делится пополам и добавляется к базовой линии.
Значение middle для строчных элементов
Для табличных элементов это значение выравнивает содержимое текущей ячейки по центру строки с учётом внутренних отступов (padding-box).
Значение middle для ячеек таблицы
Значение top для строчных элементов выравнивает верхнюю границу текущего элемента по верхней границе всей строки, на которой находится элемент. Это значение не обязательно связано со шрифтовыми элементами в строке.
Значение top для строчных элементов
Для табличных элементов это значение выравнивает содержимое текущей ячейки по верхнему краю строки с учётом внутреннего отступа.
Значение top для ячеек таблицы
Bottom
Значение bottom для строчных элементов выравнивает нижнюю границу текущего элемента по нижней границе всей строки, на которой находится элемент.
Значение bottom для строчных элементов
Для табличных элементов это значение выравнивает содержимое текущей ячейки по нижнему краю строки с учётом внутреннего отступа.
Значение bottom для ячеек таблицы
Расстояние
Указанное значение для строчных элементов передвигает базовую линию текущего элемента на указанное расстояние относительно базовой линии родительского элемента. На примере ниже, розовый квадрат имеет следующие стили:
Смещение базовой линии с помощью указания расстояния
Для табличных элементов это значение приводит к такому же результату, как и baseline .
Проценты
Указание значения в процентах для строчных элементов передвигает базовую линию текущего элемента относительно базовой линии родительского элемента на расстояние, равное заданному проценту от высоты строки родительского элемента. На примере ниже, розовый квадрат имеет следующие стили:
Смещение базовой линии с помощью указания процентов
Для табличных элементов это значение приводит к такому же результату, как и baseline .
Как поднять текст вверх, если мешают отступы другого текста?
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.6.10.42345
Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
vertical-align
Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
Синтаксис
vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit | значение | проценты
Значения
В качестве значения также можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height , при этом 0% аналогично значению baseline .
Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.
baseline Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента. bottom Выравнивает по нижнему краю ячейки. middle Выравнивает по середине ячейки. top Выравнивает содержимое ячейки по ее верхнему краю.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства vertical-align
Объектная модель
[window.]document.getElementById(" elementID ").style.verticalAlign
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .