Свойство CSS vertical-align
Свойство vertical-align определяет вертикальное выравнивание блока строчного уровня, inline-block или table-cell. К элементам строчного уровня относятся изображения, текст, кнопки и т. д.
Это свойство работает только в следующих контекстах:
- Для вертикального выравнивания содержимого внутри ячеек таблицы (
<td>) и элементов с display: table-cell. - Для вертикального выравнивания блока строчного элемента внутри его текстовой строки. Например, его можно использовать для вертикального выравнивания
<img>в строке текста.
Мы не можем использовать свойство vertical-align для вертикального выравнивания блочных элементов. Примечание: оно не центрирует дочерние блочные элементы; для этого используйте margin: 0 auto или Flexbox/Grid.
| Начальное значение | baseline |
|---|---|
| Применяется к | Элементам строчного уровня и table-cell, также применяется к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.verticalAlign = "middle"; |
Синтаксис
Синтаксис свойства CSS vertical-align
css
vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;Пример свойства vertical-align со значением "sub":
Пример свойства CSS vertical-align со значением sub
html
<!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
html
<!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
html
<!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
html
<!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>Значения
| Значение | Описание | Запустить |
|---|---|---|
| baseline | Выравнивает базовую линию элемента по базовой линии его родителя. Это значение по умолчанию. | Запустить » |
| length | Сдвигает базовую линию блока вверх (положительное значение) или вниз (отрицательное значение) относительно базовой линии родителя. | Запустить » |
| sub | Опускает базовую линию блока в правильное положение для нижних индексов блока родителя. | Запустить » |
| super | Поднимает базовую линию блока в правильное положение для верхних индексов блока родителя. | Запустить » |
| top | Выравнивает верхнюю часть выровнанного поддерева по верхней границе текстовой строки. | Запустить » |
| text-top | Выравнивает верхнюю часть блока по верхней границе области содержимого родителя. | Запустить » |
| middle | Выравнивает вертикальную середину блока по базовой линии блока родителя плюс половина x-height родителя. | Запустить » |
| bottom | Выравнивает нижнюю часть выровнанного поддерева по нижней границе текстовой строки. | Запустить » |
| text-bottom | Выравнивает нижнюю часть блока по нижней границе области содержимого родителя. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что делает свойство CSS 'vertical-align'?