Как выровнять текст в колонке flex по вертикали?

Question

[DTX]

codepen.io/anon/pen/OXxppp

Речь про .l

Answer 1

[HamSter]

.l {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Comments

[DTX]

Через align-items попроще будет. Но до сих пор интересно, можно ли обойтись без flex

[HamSter]

DTX: Если без flex, то я так делаю codepen.io/semenchenko/pen/AXQqPz?editors=1100 . Смысл: самому блоку .l добавить position: relative, внутренности этого блока обернуть к примеру в span (или любой другой блок) со свойствами display: inline-block и vertical-align: middle; + .l добавить псевдоэлемент = .l:before { display: inline-block и vertical-align: middle; height: 100%; } именно :before, именно height: 100%;

[codersite]

все хорошо, но картинку внутри блока сжимает

Answer 2

[Сергей Горячев]

flexbox.help
Пользуйтесь.

Comments

[DTX]

И что же я там должен увидеть? Хелпов и своих хватает

[Сергей Горячев]

DTX: Ты хоть посмотри, потыкай и поймешь, что это и зачем.

[DTX]

Sergey Goryachev: посмотрел, потыкал, знаний не прибавилось.
Смысл в bakckground'е. Центральное позиционирование не пойдёт

[Сергей Горячев]

DTX: Однако, правильным был выбран ответ на флексах. Жесть)

[DTX]

Sergey Goryachev: Так основые флекса я и так знал. Тут трюк заключался в том, чтобы ячейку флекса сделать тоже флексовой.