Почему vertical-align: middle ниже середины?

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;}

footopmiddlebaz

Ответ

Разобрался: для 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.