/css/vertical-align:> Вертикальное выравнивание_
Свойство vertical-align
Синтаксис
CSS 1
CSS 2‒2.2
CSS 3
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <процент> | <длина> | inherit
Описание
Свойство vertical-align устанавливает вертикальное выравнивание содержимого элемента или самого элемента.
| Применяется: | к встроенным и «table-cell» элементам; |
|---|---|
| Наследование: | отсутствует; |
| Проценты: | относительно «line-height» самого элемента; |
| Медиа: | визуальные. |
| Вычисляемое значение: |
для <процента> и <длины> ‒ абсолютная длина, в противном случае как указано |
JavaScript
[объект]
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Значения
- baseline
- Устанавливает выравнивание базовой линии текущего элемента по базовой линии элемента родителя.
- sub
- Устанавливает положение текста в качестве нижнего индекса (текст опускается немного вниз; размер шрифта остается прежним).
- super
- Устанавливает положение текста в качестве верхнего индекса (текст поднимается немного вверх; размер шрифта остается прежним).
- top
- Устанавливает выравнивание верхней границы элемента по верхней границе самого высокого элемента. В таблице устанавливает выравнивание содержимого ячейки по её верхней границе.
- text-top
- Выравнивает верхнюю границу элемента по самому высокому элементу текста родительского элемента.
- middle
- Выравнивает середину элемента по средней линии родительского элемента. В таблице содержимое ячейки выравнивается (вертикально) по центру.
- bottom
- Выравнивает нижную границу элемента по нижней границе родительского элемента. В таблице содержимое ячейки выравнивается (вертикально) по нижней границе ячейки.
- text-bottom
- Выравнивает нижнюю границу элемента по самому нижнему элементу текста (букве) родительского элемента.
- <процент>
- Устанавливает в процентном соотношении положение элемента относительно базовой линии. (Значение равное «
0» соответствует значению «baseline».) - <длина>
- Устанавливает в условных единицах высоту положения элемента относительно базовой линии. (Значение равное «
0» соответствует значению «baseline».) - inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: «baseline».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство vertical-align</title>
<style type="text/css">
.ex {
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid red;
vertical-align: 5pt;
}
</style>
</head>
<body>
<h1>Вертикальное выравнивание</h1>
<p>Выравнивание элемента [<span class="ex"></span>] в тексте </p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство vertical-align</title>
<style type="text/css">
.ex {
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid red;
vertical-align: 5pt;
}
</style>
</head>
<body>
<h1>Вертикальное выравнивание</h1>
<p>Выравнивание элемента [<span class="ex"></span>] в тексте </p>
</body>
</html>
Свойство vertical-align