Вирівнює елемент по вертикалі щодо свого батька, навколишнього тексту або осередку таблиці.
Коротка інформація
| Значення за замовчуванням | baseline |
|---|---|
| Успадковується | Ні |
| Застосовується | До малих елементів або осередків таблиці |
| Анімується | Так |
Синтаксис
<code>vertical-align: baseline|bottom |middle|sub|super|text-bottom|text-top|top| <розмір> | <відсотки>
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в вказаному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
| Значення | Опис | Вигляд |
|---|---|---|
| baseline | Вирівнює базову лінію блоку по базовій лінії батька. Якщо блок немає базової лінії, то за неї приймається нижня межа. |  Заголовок Текст |
| bottom | Вирівнює низ блоку по нижній частині рядка. | Заголовок Текст |
| middle | Вирівнює вертикальну середню точку блоку по базовій лінії батьківського блоку плюс половина висоти літери «x». |  Заголовок Текст |
| sub | Опускає базову лінію блоку вниз для створення нижнього індексу. Не впливає на розмір тексту. | Заголовок Текст |
| super | Піднімає базову лінію блоку вгору для створення верхнього індексу. Не впливає на розмір тексту. | Заголовок Текст |
| text-bottom | Нижня межа елемента вирівнюється по нижньому краю вмісту батька. | Заголовок Текст |
| text-top | Верхня межа елемента вирівнюється за верхньому краю вмісту батька. | Заголовок Текст |
| top | Вирівнює верх блоку по верхній частині рядка. | Заголовок Текст |
В якості значення також можна використовувати відсотки, пікселі або інші доступні одиниці. Позитивне число зміщує елемент вгору щодо базової лінії, тоді як негативне число опускає його вниз. При використанні відсотків відлік ведеться від значення властивості line-height, при цьому 0% аналогічно до значення baseline.
Для вирівнювання по вертикалі в осередках таблиці застосовуються такі значення.
- baseline
- Вирівнює базову лінію осередку з базовою лінією першої текстової рядки або іншого вкладеного елемента.
- bottom
- Вирівнює по нижньому краю комірки.
- middle
- Вирівнює по середині комірки.
- top
- Вирівнює вміст осередку по її верхньому краю.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vertical-align</title> <style> .tex { font-size: 2rem; }
.tex sub { vertical-align: sub; font-size: 1.8rem; }
.tex sup { vertical-align: 5px; font-size: 1.6rem; }
</style>
</head>
<body> <div class="tex"> T<sub>E</sub>X та L<sup>A</sup>T<sub>E</sub>X
</div>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Застосування властивості vertical-align
Об'єктна модель
Об'єкт.style.verticalAlign
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Inline Layout Module Level 3 | Робочий проект |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендація |
| CSS Level 1 | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 4 | 12 | 1 | 4 | 1 | 1 |
| 1 | 1 | 4 | 1 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- > — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення дейс чи властивість застосовується не до всіх елементів, які вказані в специфікації.
Число вказує версію браузера, починаючи з якої властивість підтримується.
"field field-name-field-css-cat field-type-taxonomy-term-reference field-label-hidden">