CSS приклад: vertical-align

Вертикальне вирівнювання в CSS: огляд, приклади і значення тегу

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Кратка інформація

Значення за замовчуванням	baseline
Наслідується	Ні
Застосовується	До вбудованих елементів або комірок таблиці.
Посилання на специфікацію	http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

Версії CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Опис

Вирівнює елемент по вертикалі відносно його батька, оточуючого тексту або комірки таблиці.

Синтаксис

Значення

baseline: Вирівнює базову лінію поточного елемента по базовій лінії батька. Якщо батьківський елемент не має базової лінії, то за неї приймається нижня межа елемента.
bottom: Вирівнює основу поточного елемента по нижній частині елемента рядка, розташованого нижче всіх.
middle: Вирівнює середню точку елемента по базовій лінії батька плюс половина висоти батьківського елемента.
sub: Елемент відображається як підрядковий, у вигляді нижнього індексу. Розмір шрифту при цьому не змінюється.
super: Елемент відображається як надрядковий, у вигляді верхнього індексу. Розмір шрифту залишається попереднім.
text-bottom: Нижня межа елемента вирівнюється по самій нижчій межі поточного рядка.
text-top: Верхня межа елемента вирівнюється по самому високому текстовому елементу поточного рядка.
top: Вирівнювання верхнього краю елемента по верху найвищого елемента рядка.
inherit: Наслідує значення батька.

Як значення також можна використовувати відсотки, пікселі або інші доступні одиниці. Позитивне число зсуває елемент вгору відносно базової лінії, у той час як від'ємне число опускає його вниз. При використанні відсотків, підрахунок ведеться від значення властивості line-height, при цьому 0% аналогічно значенню baseline.

Для вирівнювання по вертикалі в комірках таблиці застосовуються наступні значення.

baseline: Вирівнює базову лінію комірки з базовою лінією першого текстового рядка або іншого вкладеного елемента.
bottom: Вирівнює по нижній межі комірки.
middle: Вирівнює по середині комірки.
top: Вирівнює вміст комірки по її верхній межі.

Приклад

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>vertical-align</title>
 </head>
 <body>
  <div style="font-size: 2em">
  T<span style="vertical-align: sub">E</span>X і L<span 
  style="vertical-align: 5px; font-size: 0.8em">A</span>T<span 
  style="vertical-align: sub">E</span>X
  </div>
 </body>
</html>

Результат даного прикладу показаний на рис. 1.

Об'єктна модель

[window.]document.getElementById("elementID").style.verticalAlign

Браузери

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

Форматування

Часті запитання

Q: Як працює властивість vertical-align в CSS?

A: vertical-align визначає вертикальне позиціонування елемента всередині батьківського блоку.
Q: Для чого використовують властивість vertical-align в CSS?

A: vertical-align використовується для вирівнювання тексту та інших елементів по вертикалі всередині контейнера.
Q: Які значення можна задати для властивості vertical-align?

A: Можливі значення: baseline, sub, super, top, text-top, middle, bottom, text-bottom, а також числові значення в пікселях або відсотках.
Q: Чи працює властивість vertical-align на блочних елементах?

A: vertical-align працює на inline та inline-block елементах, але не має впливу на блочні елементи.
Q: Як вирівняти блочний елемент по центру відносно батьківського елемента за допомогою vertical-align?

A: Для вирівнювання блочного елемента по центру за допомогою vertical-align, потрібно встановити для батьківського елемента display: table-cell, а для самого елемента vertical-align: middle.