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>

  • I also wonder ... In this case, if you put the display: table div display: table , a i - display: table-cell , it works as it should. - Maxim Stepanov
  • The problem is solved if the parent container is set to font-size:0; (previously foo and baz wrapped in tags and already all the child elements set the font size). This solution allows you to remove annoying indentation between inline blocks, which is all the greater than the font-size of elements. At first glance it seems that you take away the middle and get the same result, but no, change the line-height and immediately see the spread of heights. I am a weak theoretician, so I won’t even build conjectures. - DaemonHK

1 answer 1

Understood: for vertical-align: middle middle is not the middle of the parent block, but the middle of the lowercase letter x . But due to the fact that most often the height x less than the height of capital letters, its middle is slightly below the middle of the block. At the same time, the middle of the block is taken for alignment from the child block (the one with the middle ), and the position of this middle is adjusted to the middle of the lowercase letter x parent block, as a result of which everything moves out.

All accurate slides depend on the current font and its size: if you put a font in which the height of all letters will be the same, the middle can work as expected (though then other problems will appear, but this is a different story).

Formal definition of the standard :

middle of the box with the bottom line.