Свойство CSS vertical-align
Используйте свойство CSS vertical-align для вертикального выравнивания строчных элементов. Значения свойства и примеры.
Свойство vertical-align задаёт вертикальное выравнивание строчного, строчно-блочного или ячейки таблицы блока. К строчным элементам относятся изображения, текст, кнопки и любой элемент с display: inline или display: inline-block.
На этой странице объясняется, где vertical-align действительно работает, рассматривается модель строковых блоков, которая делает значения понятными, описываются все ключевые слова и их поведение, а также типичные ошибки.
Где работает vertical-align
Свойство действует только в двух ситуациях:
- Внутри строкового блока — для выравнивания строчного или строчно-блочного элемента относительно строки текста, на которой он находится. Например, выравнивание иконки
<img>с окружающим текстом. - Внутри ячеек таблицы — для выравнивания содержимого
<td>,<th>или любого элемента сdisplay: table-cell.
В остальных контекстах свойство молча игнорируется.
Что оно НЕ делает
Это главный источник путаницы: vertical-align не центрирует блочные элементы. Установка vertical-align: middle для <div> ничего не даст. Для центрирования обычного блока используйте Flexbox (align-items: center), Grid или margin: 0 auto (только горизонтально). Ключевое слово middle, несмотря на своё название, центрирует строчный блок только относительно окружающего текста, но не блок внутри родителя.
| Начальное значение | baseline |
|---|---|
| Применяется к | Строчным элементам и ячейкам таблицы, а также к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS1 |
| DOM Syntax | object.style.verticalAlign = "middle"; |
Как работает vertical-align
Чтобы эффективно использовать свойство, нужно понимать базовую модель.
Каждая строка текста располагается внутри невидимого строкового блока (line box). Внутри этого блока есть две опорные линии:
- Базовая линия (baseline) — линия, на которой стоят нижние части большинства букв (буквы «g» и «y» опускаются ниже неё).
- Область контента (content area) — полный em-блок шрифта, приблизительно от верхушки самого высокого глифа до нижней части самого низкого выносного элемента.
Большинство значений vertical-align смещают блок относительно одной из этих линий (baseline, text-top, text-bottom, middle), тогда как top и bottom выравнивают по краям всего строкового блока.
В ячейке таблицы правила проще: vertical-align управляет расположением содержимого ячейки по высоте, и только значения top, middle, bottom и baseline имеют смысл.
Синтаксис
Синтаксис свойства CSS vertical-align
vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;Пример свойства vertical-align со значением "sub":
Пример свойства CSS vertical-align со значением sub
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: sub;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>Результат
Пример свойства vertical-align со значением "middle":
Пример свойства CSS vertical-align со значением middle
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>Пример свойства vertical-align со значением "super":
Пример свойства CSS vertical-align со значением super
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: super;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>Пример свойства vertical-align со значениями "top" и "bottom":
Пример свойства CSS vertical-align со значениями top и bottom
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid #cccccc;
}
td {
height: 100px;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<table>
<tr>
<th>Bottom</th>
<th>Middle</th>
<th>Top</th>
</tr>
<tr>
<td class="bottom">Some text</td>
<td>Some text</td>
<td class="top">Some text</td>
</tr>
</table>
</body>
</html>Пример с числовым значением (выравнивание иконки по тексту)
Числовое значение сдвигает блок вверх (положительное) или вниз (отрицательное) относительно базовой линии. Это самый удобный способ выровнять строчное изображение или иконку с рядом стоящим текстом:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.label {
font-size: 20px;
}
.icon {
width: 18px;
height: 18px;
vertical-align: -3px; /* drop it 3px to sit on the text */
}
</style>
</head>
<body>
<p class="label">
<img class="icon" src="https://api.w3docs.com/uploads/media/default/0001/03/4624f58ca574eae0a734eb0d43fd87bc2326a306.png" alt="icon">
Aligned with the text baseline
</p>
</body>
</html>Типичные ошибки
- «Загадочный зазор» под изображением. Отдельный тег
<img>внутри блока часто имеет несколько пикселей пространства снизу. Это происходит потому, что как строчный элемент изображение стоит на базовой линии текста, оставляя место для выносных элементов. Исправьте это с помощьюvertical-align: bottom(илиmiddle/top), либо сделайте изображениеdisplay: block. middle— не истинное центрирование.vertical-align: middleвыравнивает блок по базовой линии плюс половину x-height родителя — визуально близко к центру для небольших иконок, но не точно, и не работает для блочных элементов.- Свойство не наследуется. Каждый блок должен объявлять собственное значение
vertical-align; установка его у родителя не влияет на дочерние элементы. top/bottomзависят от самого высокого элемента. Они выравниваются по строковому блоку, поэтому один высокий элемент в строке может изменить позицию всего остального.- Отрицательные числовые значения разрешены и зачастую более предсказуемы, чем ключевые слова, для точного попиксельного выравнивания иконок.
Значения
| Значение | Описание | Попробуйте |
|---|---|---|
| baseline | Выравнивает базовую линию элемента по базовой линии родителя. Значение по умолчанию. | Попробуйте » |
| length | Смещает базовую линию блока вверх (положительное значение) или вниз (отрицательное значение) относительно базовой линии родителя. | Попробуйте » |
| sub | Опускает базовую линию блока до положения, подходящего для подстрочных символов родительского блока. | Попробуйте » |
| super | Поднимает базовую линию блока до положения, подходящего для надстрочных символов родительского блока. | Попробуйте » |
| top | Выравнивает верхний край выровненного поддерева по верхнему краю строкового блока. | Попробуйте » |
| text-top | Выравнивает верхний край блока по верхнему краю области контента родителя. | Попробуйте » |
| middle | Выравнивает вертикальную середину блока по базовой линии родительского блока плюс половина x-height родителя. | Попробуйте » |
| bottom | Выравнивает нижний край выровненного поддерева по нижнему краю строкового блока. | Попробуйте » |
| text-bottom | Выравнивает нижний край блока по нижнему краю области контента родителя. | Попробуйте » |
| initial | Устанавливает свойству значение по умолчанию. | Попробуйте » |
| inherit | Наследует значение свойства от родительского элемента. |
Практика
Связанные свойства
- text-align — горизонтальное выравнивание строчного содержимого.
- line-height — задаёт высоту строкового блока, по которой выравниваются
top/bottom. - display — переключение между
inline,inline-block,blockиtable-cell.