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>
Результат
Вертикальне шикування у комірці таблиці
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
table {
margin-left: auto;
margin-right: auto;
width: 80%;
}
table,
th,
td {
border: 1px solid black;
}
td {
padding: 0.5em;
font-family: monospace;
}
Result
Специфікації
Специфікація | |||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Unknown specification
Сумісність із браузерами
Дивіться також |