vertical-align

Властивість CSS vertical-align (шикувати вертикально) задає вертикальне шикування для рядкового, рядково-блокового чи таблично-коміркового елемента.

Спробуйте його в дії

Властивість 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`
Успадковується	ні
Обчислене значення	for percentage and length values, the absolute length, otherwise the keyword as specified

Формальний синтаксис

baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

Приклади

Базовий приклад

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" />
  з шикуванням text-top.
</div>
<div>
  Зображення
  <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" />
  з шикуванням text-bottom.
</div>
<div>
  Зображення
  <img class="middle" src="frame_image.svg" alt="link" width="32" height="32" />
  з шикуванням middle.
</div>

CSS

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

Результат

Вертикальне шикування в рядкових рамках

HTML

<p>
top:         <img style="vertical-align: top" src="star.png" alt="зірка"/>
middle:      <img style="vertical-align: middle" src="star.png" alt="зірка"/>
bottom:      <img style="vertical-align: bottom" src="star.png" alt="зірка"/>
super:       <img style="vertical-align: super" src="star.png" alt="зірка"/>
sub:         <img style="vertical-align: sub" src="star.png" alt="зірка"/>
</p>
<p>
text-top:    <img style="vertical-align: text-top" src="star.png" alt="зірка"/>
text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="зірка"/>
0.2em:       <img style="vertical-align: 0.2em" src="star.png" alt="зірка"/>
-1em:        <img style="vertical-align: -1em" src="star.png" alt="зірка"/>
20%:         <img style="vertical-align: 20%" src="star.png" alt="зірка"/>
-100%:       <img style="vertical-align: -100%" src="star.png" alt="зірка"/>
</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%;
}

Результат

Вертикальне шикування у комірці таблиці

У цьому прикладі таблиця з одним рядом, що містить шість комірок. Ряд задає усталене значення bottom для vertical-align.

Кожна з перших чотирьох комірок має власне значення vertical-align, і ці значення перевизначають значення від ряду.
П'ята комірка не має жодного значення vertical-align, тому успадковує значення від ряду.

Шоста комірка використовується лише для того, щоб комірки були достатньо високими, аби дія властивості була помітна.

HTML

<table>
  <tr class="bottom">
    <td class="baseline">baseline</td>
    <td class="top">top</td>
    <td class="middle">middle</td>
    <td>bottom</td>
    <td>Стиль ряду</td>
    <td>
      Ми впевнені, що впровадження продуктів харчування (збільшення асортименту
      товарів) критично необхідне для розвитку.
    </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;
}

.bottom {
  vertical-align: bottom;
}

.baseline {
  vertical-align: baseline;
}

.top {
  vertical-align: top;
}

.middle {
  vertical-align: middle;
}

Result

Специфікації

Специфікація
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (CSS 2.1) # propdef-vertical-align

Сумісність із браузерами

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
`vertical-align`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support 4	Opera Full support 4	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox for Android Full support 4	Opera Android Full support 14	Safari on iOS Full support 1	Samsung Internet Full support 1.0

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.