vertical-align | Вертикальное выравнивание текста | CSS

vertical-align [w3.org] работает только с элементами таблицы и inline-элементами (в т.ч. с display: inline-block;).

vertical-align для элементов таблицы и для display: table-cell;

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

Blogger текст
строка1
строка2
<style>
.demotable {
  background: #E7D5C0;
}
.demotable td {
  height: 150px;
  border: 1px dashed #E7D5C0;
  background: #fff5d7;
  vertical-align: middle; /* выравнивает содержимое по центру высоты ячейки */baseline; /* выравнивает содержимое ячейки по базовой линии ячеек, которым установлено vertical-align: baseline; */top; /* выравнивает содержимое по верху ячейки */bottom; /* выравнивает содержимое по низу ячейки */
}
</style>

<table class="demotable">
  <tr>
    <td><img height="72" width="72" src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png" alt="Blogger"/>
    <td>текст
    <td><div>строка1<br>строка2</div>
</table>
Строка
Базовая линия (англ. baseline, или линия шрифта) — это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, например, как у букв «ц», «д», «р», «щ».

display: table-cell; похож на <td>. Высота элемента с display: table-cell; равна высоте наиболее высокого элемента с display: table-cell; из группы. vertical-align тут также выравнивает содержимое по вертикали, но уже по умолчанию имеет значение baseline.

Blogger
текст
строка1
строка2
<style>
.demotable {
  background: #E7D5C0;
}
.demotable > div {
  display: table-cell;
  height: 150px; /* значение не может быть в % от высоты родителя */
  border: 1px dashed #E7D5C0;
  background: #fff5d7;
  vertical-align: baseline;middle;top;bottom;
}
</style>

<div class="demotable">
    <div><img height="72" width="72" src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png" alt="Blogger"/></div>
    <div>текст</div>
    <div><div>строка1<br>строка2</div></div>
</div>

Если элемент с display: table-cell; нужно выровнять по высоте родителя, то родителю нужно указать display: table; или display: inline-table;.

Blogger
текст
строка1
строка2
<style>
.demotable {
  display: table;
  height: 150px; /* значение может быть в % от высоты родителя */
  background: #E7D5C0;
}
.demotable > div {
  display: table-cell;
  border: 1px dashed #E7D5C0;
  background: #fff5d7;
  vertical-align: middle;
}
</style>

<div class="demotable">
    <div><img height="72" width="72" src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png" alt="Blogger"/></div>
    <div>текст</div>
    <div><div>строка1<br>строка2</div></div>
</div>

vertical-align у элементов с display: inline;, display: inline-block; и display: inline-table;

vertical-align у строчных тегов выравнивает по вертикали сам элемент относительно родителя, если его высота меньше высоты текущей строки родителя (свойство line-height).

Отступ сверху: px
Высота элемента: px
Отступ снизу: px1px
<style>
.sem {
  background: #fff5d7;
  line-height: 150px;
  font-size: 0; /* font-size можно и не обнулять, если не смущает что от нижнего края элемента до нижнего края родителя будет меньше пространства, чем предполагается, на значение около 4px (это расстояние от низа строки до baseline) */
}
.sem div {
  display: inline-block;
  font-size: medium;
  line-height: normal;
  vertical-align: baselinetoptext-topmiddlebottomtext-bottominherit /* наследуется значение родителя */;
}
</style>

<div class="sem"><div>
<!-- содержимое -->
</div></div>

Или относительно соседних элементов, находящихся на данной строке.

Элемент <sub>1px Текст строки x <sup>1px display: inline-block; Blogger 
<style>
b {
  font-size: 150%;
  vertical-align: baseline; /* базовая линия элемента совпадает с базовой линией строки родителя */top; /* выровнять верхний край элемента по верхнему краю размещённого выше остальных элемента строки */text-top; /* вертикальное выравнивание верхнего края элемента по верхнему краю текста строки */middle; /* середина элемента совпадает с центром строчной «x» предка */bottom; /* нижний край элемента выравнивается по нижнему краю расположенного ниже всех элемента строки */text-bottom; /* вертикальное выравнивание нижнего края элемента по нижнему краю текста строки */sub; /* базовая линия элемента совпадает с базовой линией нижнего индекса */super; /* базовая линия элемента совпадает с базовой линией верхнего индекса */inherit; /* наследуется значение родителя */
}
span {
  display: inline-block;
  height: 5em;
}
</style>

<b>Элемент</b> <sub>&lt;sub&gt;</sub> Текст строки x <sup>&lt;sup&gt;</sup> <span>display: inline-block;</span> <img height="72" width="72" src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png" alt="Blogger"/>

Практическое использование: Как сделать обтекание картинки текстом.

Или vertical-align сам увеличивает строку родителя на значение, указанное в px или %.

Элемент <sub>1px Текст строки x <sup>1px display: inline-block; Blogger 
<style>
b {
  font-size: 150%;
  vertical-align: baseline;
}
span {
  display: inline-block;
  height: 100px;
}
</style>

<b>Элемент</b> <sub>&lt;sub&gt;</sub> Текст строки x <sup>&lt;sup&gt;</sup> <span>display: inline-block;</span> <img height="72" width="72" src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png" alt="Blogger"/>

vertical-align не работает

Ещё раз хочу обратить внимание на то, что для inline-элементов vertical-align: middle;:

  1. выравнивает сам элемент, а не его содержимое. То есть не будут желаемого результата, если vertical-align присвоить родителю.
  2. выравнивает элемент только относительно других соседних элементов, если для родителя не указана line-height. То есть у родителя должно быть два и более дочерних элементов. 

<style>
.parent {
  min-height: 150px; /* если дочерний элемент будет выше родителя, то родитель увеличится на необходимую высоту. При необходимости заменить на height */
  background: #E7D5C0;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  width: 100%;
}
.parent div {
  max-width: 300px; /* не обязательно */
  width: 100%; /* не обязательно */
  height: 100px; /* не обязательно */
  background: #fff5d7; /* не обязательно */
  text-align: left; /* не обязательно */
  display: inline-block;
  vertical-align: middle;
  vertical-align: middle;
}
.parent:before {
  content: "";
  display: inline-block;
  min-height: inherit;
  height: 100%;
  vertical-align: middle;
}
</style>

<div class="parent"><div></div></div>
Этот вариант вертикального выравнивания текста по центру блока предпочтителен, поскольку line-height может не поддерживаться мобильными браузерами, такими как Opera Mini [opera.com], и равнозначен с display: table-cell;.
в f t
наверх ↑

Комментариев нет: