Разобрался: для 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.
display: table
, ai
-display: table-cell
, работает как нужно.font-size:0;
(предварительноfoo
иbaz
обернув в теги и уже всем дочерним элементам задать размер шрифта). Такое решение позволяет убирать надоедливый отступ междуinline
блоками, который тем больше, чемfont-size
у элементов. На первый взгляд кажется, что убери тыmiddle
и получишь тот же результат, но нет, измениline-height
и сразу увидишь разброс высот. Теоретик я слабый, поэтому даже догадок строить не буду.