This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

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 class="default-example" id="default-example">
 <p>
 Align the star:
 <img id="example-element" 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 применяется только к строчным и строчно-блочным элементам, а также к элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования блочных элементов.

Синтаксис

css

/* Ключевые слова */
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

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

css

img.top {
 vertical-align: text-top;
}
img.bottom {
 vertical-align: text-bottom;
}
img.middle {
 vertical-align: middle;
}

Результат

[フレーム]

Вертикальное позиционирование строчного элемента

HTML

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>

#* {
 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

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

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

Совместимость с браузерами

Смотрите также

Help improve MDN

Learn how to contribute

This page was last modified on ⁨7 нояб. 2025 г.⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content