3

div {
  background-color: blue;
  height: 36px;
  line-height: 36px;
}

i {
  background-color: red;
  display: inline-block;
}

i.top {vertical-align: top;}
i.middle {vertical-align: middle;}
<div>foo<i class="top">top</i><i class="middle">middle</i>baz</div>

2
  • Мне тоже интересно... При этом если поставить div'у display: table, a i - display: table-cell, работает как нужно. 15 дек 2017 в 18:47
  • Проблема решается, если родительскому контейнеру задать font-size:0; (предварительно foo и baz обернув в теги и уже всем дочерним элементам задать размер шрифта). Такое решение позволяет убирать надоедливый отступ между inline блоками, который тем больше, чем font-size у элементов. На первый взгляд кажется, что убери ты middle и получишь тот же результат, но нет, измени line-height и сразу увидишь разброс высот. Теоретик я слабый, поэтому даже догадок строить не буду.
    – DaemonHK
    16 дек 2017 в 4:53

1 ответ 1

4

Разобрался: для vertical-align: middle серединой является не середина родительского блока, а середина строчной буквы x. Но из-за того, что чаще всего высота x меньше высоты прописных букв, её середина оказывается немного ниже середины блока. При этом у дочернего блока (того, который с middle) для выравнивания берётся середина именно блока, и положение этой середины подгоняется под середину строчной буквы x родительского блока, в результате чего всё и съезжает.

Все точные съезжания зависят от текущего шрифта и его размера: если поставить шрифт, в котором высота всех букв будет одинакова, то middle может заработать как ожидается (правда, тогда появятся другие проблемы, но это другая история).

Формальное определение из стандарта:

middle: Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.