vertical-align
Оновлено: 05.12.2022
vertical-align
Вирівнює елемент по вертикалі відносно свого батька, навколишнього тексту або комірки таблиці.
Коротка інформація
До рядкових елементів або комірок таблиці| Значення за замовчуванням | baseline |
|---|---|
| Наслідується | Ні |
Застосовується | До рядкових елементів або комірок таблиці |
| Анімується | Так |
Синтаксис
vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|
<розмір> | <відсотки>
Значення
| Значення | Опис |
|---|---|
| baseline | Вирівнює базову лінію блоку за базовою лінією батька. Якщо у блока немає базової лінії, то за неї приймається нижня межа. |
| bottom | Вирівнює низ блоку по нижній частині рядка. |
| middle | Вирівнює вертикальну середню точку блоку за базовою лінією батьківського блоку плюс половина висоти літери "x". |
| sub | Опускає базову лінію блоку вниз для створення нижнього індексу. Не впливає на розмір тексту. |
| super | Піднімає базову лінію блоку вгору для створення верхнього індексу. Не впливає на розмір тексту. |
| text-bottom | Нижня межа елемента вирівнюється за нижнім краєм вмісту батьківського елемента. |
| text-top | Верхня межа елемента вирівнюється по верхньому краю вмісту батька. |
| top | Вирівнює верх блоку по верхній частині рядка. |
Як значення також можна використовувати відсотки, пікселі або інші доступні одиниці. Позитивне число зміщує елемент догори відносно базової лінії, тоді як від'ємне число опускає його донизу. При використанні відсотків, відлік ведеться від значення властивості line-height, при цьому 0% аналогічно значенню baseline.
Для вирівнювання по вертикалі в комірках таблиці застосовуються такі значення.
| baseline | Вирівнює базову лінію комірки з базовою лінією першого текстового рядка або іншого вкладеного елемента. |
| bottom | Вирівнює по нижньому краю комірки. |
| middle | Вирівнює по середині комірки. |
| top | Вирівнює вміст комірки по її верхньому краю. |
Приклад
Об'єктна модель
Об'єкт.style.verticalAlign