There is a way to align the inline-block element vertically with add. an item. Example http://jsfiddle.net/k46mm5ve/29/

div { height: 200px; background: #FAF375; text-align: center; } div:before{ content: ''; display: inline-block; vertical-align: middle; height:100%; } span { font-size: 2em; display: inline-block; background: green; width: 60%; vertical-align: middle; }

Why does this work? I would like a refutation or confirmation of their thoughts. All lowercase are aligned through vertical-align in the middle of x-height . So we need to put this x-height in the center of the parent element. To do this, you must assign a child height = height of the parent. We can not put such a height to our child, because we do not need it for the whole parent. Then we use add. element. He is invisible, if we, put down for him only the height. But he makes a line = parent line. And all elements in the line are aligned as necessary.

    1 answer 1

    When using line-height lower-case blocks are aligned vertically with respect to neighboring blocks, and in your case there is only one block. Therefore, in order to align with the use of this property, it is necessary to add a block with respect to which alignment will occur. And in order that it does not interfere, it is created with a pseudo-element (does not violate the semantics and internal structure) and give it a height equal to the height of the parent.

    • Thanks, understood. - Nika Chai
    • Although, probably more precisely so - lower case blocks are aligned not relative to each other, but all have an impact on the baseline. So we through its additional element we shift, thereby displacing an initial child element. - Nika Chai