English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Атрибут CSS vertical-align для вертикального выравнивания используется для определения способа вертикального выравнивания嵌入式 или ячеек таблицы. Vertical-align - это одна из важнейших функций CSS. Для начинающих может быть трудно сразу понять, но в конце статьи даны примеры, которые помогут быстро понять и освоить этот атрибут.
Это применяется к инлайн или инлайн-блоковым элементам.
Это влияет на способ выравнивания элементов, не влияя на их содержимое. (Исключая ячейки таблицы)
Когда его применяют к ячейкам таблицы, он влияет на содержимое ячеек, а не на ячейки сами по себе.
| Значение | Описание |
|---|---|
| baseline | Это выравнивает базовую линию элемента с базовой линией родительского элемента. Это значение по умолчанию. |
| length | Это используется для увеличения или уменьшения длины элементов по указанной длине. Также можно использовать отрицательные значения. |
| % | Это используется для увеличения или уменьшения элементов по проценту от属性的 "высоты строки". Допускаются отрицательные значения. |
| sub | Элемент выравнивается, как если бы он был подстрочным. |
| super | Элемент выравнивается, как если бы он был индексом. |
| top | Верх элемента выравнивается с верхом наивысшего элемента строки. |
| bottom | Низ элемента выравнивается с нижним элементом строки. |
| text-top | Верх элемента совпадает с верхней частью шрифта родительского элемента. |
| middle | Элемент помещается в середину родительского элемента. |
| text-bottom | Низ элемента совпадает с нижней частью шрифта родительского элемента. |
| initial | Этот атрибут устанавливается в его значение по умолчанию. |
| inherit | Этот атрибут наследуется из родительского элемента. |
<!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p><img src="/run/images/heart.jpg" alt="Форма сердца"/> Это изображение с-defaultным выравниванием.</p>
<p><img src="/run/images/heart.jpg" style="vertical-align: text-top;" alt="Форма сердца"/> Это изображение с текстом, выровненным вверху.</p>
<p><img src="/run/images/heart.jpg" style="vertical-align: text-bottom;" alt="Форма сердца"/> Это изображение с текстом, выровненным внизу.</p>
</body>
</html>Проверьте, посмотрите <‹/›>Вывод:
Это изображение с默认ным выравниванием.
Это изображение с текстом, выровненным вверху.
Это изображение с текстом, выровненным внизу.