This page was translated from English by the community.Learn more and join the MDN Web Docs community.
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 июль 2015 г..
CSS-свойствоvertical-align устанавливает вертикальное выравнивание строчных (англ.inline) и строчно-блочных (англ.inline-block) элементов или ячеек таблицы (table-cell).
Интерактивный пример
vertical-align: baseline;vertical-align: top;vertical-align: middle;vertical-align: bottom;vertical-align: sub;vertical-align: text-top;<section> <p> Align the star: <img src="/shared-assets/images/examples/star2.png" /> </p></section>#default-example > p { line-height: 3em; font-family: monospace; font-size: 1.2em; text-decoration: underline overline;}Свойство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 src="frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по верхнему краю.</div><div> Изображение <img src="frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по нижнему краю.</div><div> Изображение <img 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 src="star.png" alt="star"/>middle: <img src="star.png" alt="star"/>bottom: <img src="star.png" alt="star"/>super: <img src="star.png" alt="star"/>sub: <img src="star.png" alt="star"/></p><p>text-top: <img src="star.png" alt="star"/>text-bottom: <img src="star.png" alt="star"/>0.2em: <img src="star.png" alt="star"/>-1em: <img src="star.png" alt="star"/>20%: <img src="star.png" alt="star"/>-100%: <img src="star.png" alt="star"/></p>#* { box-sizing: border-box;}img { margin-right: 0.5em;}p { height: 3em; padding: 0 0.5em; font-family: monospace; text-decoration: underline overline; margin-left: auto; margin-right: auto; width: 80%;}Result
Вертикальное позиционирование содержимого ячейки таблицы
HTML
<table> <tr> <td>baseline</td> <td>top</td> <td>middle</td> <td>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 |
|---|
| CSS Inline Layout Module Level 3 # propdef-vertical-align |