w3docs logo

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

Свойство vertical-align устанавливает вертикальное выравнивание строчных элементов.

Свойство vertical-align работает только для строчных, строчно-блочных элементах и ячеек таблицы. Строчные элементы содержат изображения, текст, кнопки и т. д.

Свойство vertical-align используется для выравнивания контента внутри ячеек таблицы (<td>), а также для элементов со свойством display: table-cell.

Значение по умолчанию baseline
Применяется К строчным элементам и к элементам ячеек таблицы, а также к ::first-letter и ::first-line.
Наследуется Нет
Анимируемое Да. Вертикальное выравнивание анимируемо
Версия CSS1
DOM синтаксис object.style.verticalAlign = "middle";

Синтаксис

vertical-align: baseline | length | sub | super | top | text-top | middle | bottom|  text-bottom | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      span {
      vertical-align: sub;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства vertical-align</h2>
    <p>Параграф со свойством <span>vertical-align</span></p>
  </body>
</html>

Пример со значением "middle":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      span {
      vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства vertical-align</h2>
    <p>Параграф со свойством <span>vertical-align</span>.</p>
  </body>
</html>

Пример со значением "super":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      span {
      vertical-align: super;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства vertical-align</h2>
    <p>Параграф со свойством <span>vertical-align</span></p>
  </body>
</html>

Следующий пример показывает, как работают значения "top" и "bottom":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      table {
      width: 100%;
      border-collapse: collapse;
      }
      table, th, td { 
      border: 1px solid #cccccc;
      }
      td {
      height: 100px;
      }
      .top { 
      vertical-align: top;
      }
      .bottom { 
      vertical-align: bottom;
      } 
    </style>
  </head>
  <body>
    <h2>Пример свойства vertical-align</h2>
    <table>
      <tr>
        <th>Bottom</th>
        <th>Middle</th>
        <th>Top</th>
      </tr>
      <tr>
        <td class="bottom">Текст</td>
        <td>Some text</td>
        <td class="top">Текст</td>
      </tr>
    </table>
  </body>
</html>

Значения

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

Поддержка браузера

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 4.0+

Практикуйте свои знания

Какими значениями может обладать свойство CSS 'vertical-align'?
Считаете ли это полезным?