Свойство CSS vertical-align

Свойство CSS vertical-align отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами.

Синтаксис CSS vertical-align

...
vertical-align: value;
...

Где value может принимать следующие значения:

  • baseline – выравнивание по базовой линии предка (или просто нижняя граница родителя)
  • bottom – выравнивание по нижней части строки (или элемента, который располагается ниже всех)
  • middle – выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента
  • sub – отображение происходит под строкой (выглядит как подстрочный индекс)
  • super – отображение происходит над строкой (как верхний индекс)
  • text-bottom – выравнивание нижней границы элемента по нижнему краю строки
  • text-top – выравнивание верхняя границы элемента по верхнему краю строки
  • top – выравнивание верхняя края элемента по верху самого высокого элемента строки
  • inherit – наследует значение родителя
  • значение – указывается в пикселях. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
  • проценты – указывается в процетах. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз

Значение vertical-align по умолчанию:

  • baseline (для строчных элементов)
  • middle (для ячеек таблицы)

Вертикальное выравнивание в таблицах

Чаще всего vertical-align используется в ячейках таблиц. В теге <table> используют атрибут valign.





Синтаксис CSS valign для таблиц

<td valign="value">
или
<tr valign="value">

Где value может принимать следующие значения:

  • baseline – выравнивание по базовой линии первой текстовой строки
  • bottom – выравнивание по нижнему краю ячейки таблицы
  • middle – выравнивание по середине ячейки
  • top – выравнивание верхнему краю ячейки

Например:

<table>
<tr>
<td valign="top">
Выравнивание по верху
</td>
</tr>
<tr>
<td valign="middle">
Выравнивание по середине
</td>
</tr>
<tr>
<td valign="bottom">
Выравнивание по низу
</td>
</tr>
</table>

Преобразуется на странице в следующее:


Выравнивание по верху

Выравнивание по середине

Выравнивание по низу

Примеры с вертикальными выравниваниями

Пример 1. Значения vertical-align: baseline, bottom, top, sub

<html>
<head>
<style>
.vert_align_baseline{
display: inline-block;
vertical-align: baseline;
background: #ccc;
}
.vert_align_top{
display: inline-block;
vertical-align: top;
background: #ccc;
}
.vert_align_bottom{
display: inline-block;
vertical-align: bottom;
background: #ccc;
}
.vert_align_sub{
display: inline-block;
vertical-align: sub;
background: #ccc;
}
.vert_align_text_top{
display: inline-block;
vertical-align: top;
background: #ccc;
}
</style>
</head>
<body>
<br/><span class="vert_align_baseline">Текст с выравниванием vert_align_baseline</span>
<br/><span class="vert_align_bottom">Текст с выравниванием vert_align_bottom</span>
<br/><span class="vert_align_top">Текст с выравниванием vert_align_top</span>
<br/><span class="vert_align_sub">Текст с выравниванием vert_align_sub</span>
</body>
</html>



Пример 2. Значения vertical-align: абсолютные значения и проценты

Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами.

<html>
<head>
<style>
.vert_align_abs_plus{
display: inline-block;
vertical-align: 10px;
background: #aaa;
}
.vert_align_abs_minus{
display: inline-block;
vertical-align: -5px;
background: #aaa;
}
.vert_align_per_plus{
display: inline-block;
vertical-align: 50%;
background: #aaa;
}
.vert_align_per_minus{
display: inline-block;
vertical-align: -30%;
background: #aaa;
}
</style>
</head>
<body>
<br/><span class="vert_align_abs_plus">Текст с выравниванием на 10 пикселей вверх</span>
<br/><span class="vert_align_abs_minus">Текст с выравниванием на 5 пикселей вниз</span>
<br/><span class="vert_align_per_plus">Текст с выравниванием на 50% вверх</span>
<br/><span class="vert_align_per_minus">Текст с выравниванием на 30% вниз</span>
</body>
</html>

Преобразуется на странице в следующее:


Исходная строка. Текст с выравниванием на 10 пикселей вверх

Исходная строка. Текст с выравниванием на 5 пикселей вниз

Исходная строка. Текст с выравниванием на 50% вверх

Исходная строка. Текст с выравниванием на 30% вниз

Примечание

Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы “X” (также называемой x-высотой).

Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:

object.style.verticalAlign="VALUE"




Читайте также:

• CSS border

• CSS background

• CSS transition

• Свойство display

• Свойство nth-child

• Свойство overflow

• Свойство text-indent


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.