Свойство CSS vertical-align описывает вертикальное позиционирование строчных элементов (inline) или ячеек таблицы (table-cell).
/* ключевые значения */ 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: unset;
Свойство vertical-align может использоваться в двух контекстах:
- Для вертикального позиционирования области строчного элемента внутри области содержащей его строки. Например, с помощью него можно вертикально позиционировать
<img>в строке текста:
<p> top:<img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/> middle:<img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/> bottom:<img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> super:<img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/> sub:<img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/> </p> <p> text-top:<img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/> text-bottom:<img style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> 0.2em:<img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/> -1em:<img style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/> 20%:<img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/> -100%:<img style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/> </p>
#* {
box-sizing: border-box;
}
img {
margin-right: 0.5em;
}
p {
height: 3em;
padding: 0 .5em;
font-family: monospace;
text-decoration: underline overline;
margin-left: auto;
margin-right: auto;
width: 80%;
}
- Для вертикального позиционирования содержимого ячейки таблицы:
<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>
table {
margin-left: auto;
margin-right: auto;
width: 80%;
}
table, th, td {
border: 1px solid black;
}
td {
padding: 0.5em;
font-family: monospace;
}
Обратите внимание: свойство vertical-align применяется только к строчным элементам и элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования блочных элементов.
| Начальное значение | baseline |
|---|---|
| Применяется к | строчным элементам и ячейкам таблиц. Это также применяется к ::first-letter и ::first-line. |
| Наследуется | нет |
| Проценты | относятся к line-height самого элемента |
| Обработка значения | для процентов и значений длин, абсолютных длин или ключевых слов, если указаны |
| Animation type | длина |
Синтаксис
Свойство vertical-align задается одним из ключевых значений, указанных ниже.
Значения для строчных элементов
Значения относительно родительского элемента
Данные значения позиционируют элемент по вертикали относительно родительского элемента:
baseline- Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов, таких как
<textarea>, не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера. sub- Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.
super- Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.
text-top- Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.
text-bottom- Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.
middle- Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).
<length>- Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.
<percentage>- Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства
line-height) над базовой линией родительского элемента. Допустимы отрицательные значения.
Значения относительно строки
Следующие значения позиционируют элемент по вертикали относительно всей строки:
top- Выравнивает верхний край элемента и его потомков с верхним краем всей строки.
bottom- Выравнивает нижний край элемента и его потомков с нижним краем всей строки.
Для элементов, у которых нет базовой линии, вместо нее используется нижняя граница внешнего отступа (margin).
Значения для ячеек таблицы
baseline(иsub,super,text-top,text-bottom,<length>, и<percentage>)- Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.
top- Выравнивает верхнюю границу внутреннего отступа (padding) ячейки с верхним краем строки таблицы.
middle- Выравнивает внутреннее поле (padding box) ячейки по центру относительно строки таблицы.
bottom- Выравнивает нижнюю границу внутреннего отступа (padding) ячейки с нижним краем строки таблицы.
Допустимы отрицательные значения.
Формальный синтаксис
baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
Пример
HTML
<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по умолчанию.</div> <div>Изображение <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по верхнему краю.</div> <div>Изображение <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по нижнему краю.</div> <div>Изображение <img class="middle" src="https://mdn.mozillademos.org/files/12245/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; }
Результат
Спецификации
| Спецификация | Статус | Комментарий |
|---|---|---|
| CSS Transitions Определение 'vertical-align' в этой спецификации. |
Рабочий черновик | Определяет vertical-align как анимируемый. |
| CSS Level 2 (Revision 1) Определение 'vertical-align' в этой спецификации. |
Рекомендация | Добавляет значение <length> и позволяет применять его к элементам с типом table-cell – display. |
| CSS Level 1 Определение 'vertical-align' в этой спецификации. |
Рекомендация | Изначальное определение. |
Совместимость с браузерами
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
vertical-align | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 4 | Opera Полная поддержка 4 | Safari Полная поддержка 1 | WebView Android Полная поддержка 1 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка 1.0 |
Легенда
- Полная поддержка
- Полная поддержка