vertical-align
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS-свойство vertical-align
устанавливает вертикальное выравнивание строчных (англ. inline) и строчно-блочных (англ. inline-block) элементов или ячеек таблицы (table-cell).
Интерактивный пример
Свойство vertical-align
может использоваться в двух контекстах:
- Для вертикального выравнивания области строчного элемента внутри содержащей его строки. Например, с помощью него можно задать вертикальное позиционирование изображения в строке текста.
- Для вертикального выравнивания содержимого ячейки таблицы.
Следует иметь в виду, что свойство vertical-align
применяется только к строчным и строчно-блочным элементам, а также к элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования блочных элементов.
Синтаксис
/* Ключевые слова */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* Значения длины (<length>) */
vertical-align: 10em;
vertical-align: 4px;
/* Процентные значения (<percentage>) */
vertical-align: 20%;
/* Глобальные значения */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;
Свойство vertical-align
задаётся одним из значений, указанных ниже.
Значения для строчных элементов
Значения относительно родительского элемента
Данные значения позиционируют элемент по вертикали относительно родительского элемента:
baseline
-
Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов, таких как
<textarea>
, не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера. sub
-
Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.
super
-
Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.
text-top
-
Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.
text-bottom
-
Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.
middle
-
Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).
<length>
-
Выравнивает базовую линию элемента относительно базовой линии родительского элемента со смещением на указанную величину. Допустимы отрицательные значения.
<percentage>
-
Выравнивает базовую линию элемента относительно базовой линии родительского элемента со смещением на указанную в процентах величину (вычисляется относительно значения свойства
line-height
). Допустимы отрицательные значения.
Значения относительно строки
Следующие значения позиционируют элемент по вертикали относительно всей строки:
top
-
Выравнивает верхний край элемента и его потомков с верхним краем всей строки.
bottom
-
Выравнивает нижний край элемента и его потомков с нижним краем всей строки.
Для элементов, у которых нет базовой линии, вместо неё используется нижняя граница внешнего отступа
.
Значения для ячеек таблицы
baseline
(иsub
,super
,text-top
,text-bottom
,<length>
, и<percentage>
)-
Выравнивают базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.
top
-
Выравнивает верхнюю границу
внутреннего отступа
ячейки с верхним краем строки таблицы. middle
-
Выравнивает внутреннее поля ячейки по центру относительно строки таблицы.
bottom
-
Выравнивает нижнюю границу
внутреннего отступа
ячейки с нижним краем строки таблицы.
Допустимы отрицательные значения.
Формальное определение
Начальное значение | baseline |
---|---|
Применяется к | строчным элементам и ячейкам таблиц. Это также применяется к ::first-letter и ::first-line . |
Наследуется | нет |
Проценты | относятся к line-height самого элемента |
Обработка значения | для процентов и значений длин, абсолютных длин или ключевых слов, если указаны |
Animation type | длина |
Формальный синтаксис
vertical-align =
[ first | last ] ||
<'alignment-baseline'> ||
<'baseline-shift'>
<alignment-baseline> =
baseline |
text-bottom |
alphabetic |
ideographic |
middle |
central |
mathematical |
text-top
<baseline-shift> =
<length-percentage> |
sub |
super |
top |
center |
bottom
<length-percentage> =
<length> |
<percentage>
Примеры
Основной пример
HTML
<div>
Изображение <img src="frame_image.svg" alt="link" width="32" height="32" /> с
выравниванием по умолчанию.
</div>
<div>
Изображение
<img class="top" src="frame_image.svg" alt="link" width="32" height="32" /> с
выравниванием по верхнему краю.
</div>
<div>
Изображение
<img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" />
с выравниванием по нижнему краю.
</div>
<div>
Изображение
<img class="middle" src="frame_image.svg" alt="link" width="32" height="32" />
с выравниванием по центру.
</div>
CSS
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
img.middle {
vertical-align: middle;
}
Результат
Вертикальное позиционирование строчного элемента
HTML
<p>
top: <img style="vertical-align: top" src="star.png" alt="star"/>
middle: <img style="vertical-align: middle" src="star.png" alt="star"/>
bottom: <img style="vertical-align: bottom" src="star.png" alt="star"/>
super: <img style="vertical-align: super" src="star.png" alt="star"/>
sub: <img style="vertical-align: sub" src="star.png" alt="star"/>
</p>
<p>
text-top: <img style="vertical-align: text-top" src="star.png" alt="star"/>
text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
0.2em: <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
-1em: <img style="vertical-align: -1em" src="star.png" alt="star"/>
20%: <img style="vertical-align: 20%" src="star.png" alt="star"/>
-100%: <img style="vertical-align: -100%" src="star.png" alt="star"/>
</p>
Result
Вертикальное позиционирование содержимого ячейки таблицы
HTML
<table>
<tr>
<td style="vertical-align: baseline">baseline</td>
<td style="vertical-align: top">top</td>
<td style="vertical-align: middle">middle</td>
<td style="vertical-align: bottom">bottom</td>
<td>
<p>
Существует теория, которая утверждает, что если однажды кто-нибудь
доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же
исчезнет, и вместо неё появится нечто ещё более причудливое и
необъяснимое.
</p>
<p>Существует и другая теория, согласно которой это уже случилось.</p>
</td>
</tr>
</table>
CSS
table {
margin-left: auto;
margin-right: auto;
width: 80%;
}
table,
th,
td {
border: 1px solid black;
}
td {
padding: 0.5em;
font-family: monospace;
}
Результат
Спецификации
Specification |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align |
Совместимость с браузерами
BCD tables only load in the browser