I can not understand how the method of vertical centering.

jsfiddle

.parent { height:100px; width:600px; border:1px solid #ff0000; } .helper { display:inline-block; height:100%; width:1px; background:green; } .child { display:inline-block; vertical-align:middle; border:1px solid #0000ff; } 
 <div class="parent"> <div class="helper"></div> <div class="child">TEXT</div> </div>

If you give the .helper element vertical-align: middle, it is centered perfectly. Without it, no. But it must be without it?

The height of the line is given by the .helper block in 100% of the parent. Further, the following is known - vertical-align: middle - alignment of the midpoint of the element at the baseline of the parent plus half the height of the parent element. The baseline is at the bottom .helper + half the height of the parent element. Following this, the .child element should now be centered, but in reality it simply matched its midpoint to the baseline. Please explain what I do not understand ??

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

As display units: inline-block; If you try to build one after the other according to the documentation, then vertical-align them accordingly, otherwise the vertical block after the vertical-align block becomes the bottom type ... something like this. PS and better when used in the construction of inline-block do not leave a gap between the blocks (space / line break / etc.) otherwise there will be an indent which you will not understand where it was born from.

 .parent { height:100px; width:600px; border:1px solid #ff0000; } .helper { display:inline-block; height:100%; width:1px; background-color:green; vertical-align:middle; } .child { display:inline-block; vertical-align:middle; border:1px solid #0000ff; } 
 <div class="parent"> <div class="helper"> </div><div class="child">TEXT</div> </div>

    According specification: http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

    The very last line:

    If you haven’t been on the line, it’s not bottom line edge.

    What the translation means is something like: The baseline of an inline block is the baseline of the last text block in the usual context, otherwise the baseline is the bottom edge.

    • Yes, but, if in this case I give the .helper vertical-align: middle block, how will this affect the baseline then? - P. Ivanov