Как выровнять inline-block вертикально по центру?

Question

[DTX]

codepen.io/anon/pen/YWOmyX

Без флекса есть варианты?
Нужно для понимания инлайнов.

Answer 1

[Neyury]

Советую прочитать эту статью, там описаны все варианты центрирования по горизонтали и вертикали для строчных (включая inline-block) и блочных элементов.

Comments

[DTX]

Из адекватного нашёл там только display: table-cell, но тогда появится два лишних блока (table и table-cell)

[Neyury]

DTX: на inline-block еще работают способы блочных элементов

[DTX]

Neyury: либо флекс либо absolute. Проблема в том, что у меня два элемента

[Neyury]

DTX: Пора учиться использовать Flex! Единственная проблема flex, это браузер IE? который используют 5% людей. На этот случай можно воспользоваться этим полифилом, который добавляют поддержку более ранних версий IE.
https://github.com/jonathantneal/flexibility

Есть пару свойств, который плохо работают в IE11, в этом случае просто делаешь проверку на версию браузера, и если это IE11, то фиксишь с помощью JS нужные свойства

[DTX]

Neyury: флекс давно знаю и использую. В шапке написал, что вопрос нужен для понимания инлайнов.

[Neyury]

DTX: Ну так нет нормально способа центрировать блоки по вертикали, если это не флекс.