Как центровать содержимое блоков в одну линию?

Question

[алексей]

Учусь использовать bootstrap, сверстал простую адаптивную страницу, но в процессе возник вопрос.

Допустим требуется расположить 3 блока с текстом в ряд, при этом чтобы текст внутри блоков был отцентрован по одной линии, независимо от объема текста в конкретном блоке. Как показано на картинке:


Получается реализовать только таблицей через display: table-cell, но если блоки будут с классами col, то и поведение у них флоатное, а не табличное и никак подобную центровку сделать не выходит. Есть какой-то другой способ, или только верстать этот участок таблицей, а потом добиваться адаптивности этого куска прописывая вручную медиа-запросы?

Answer 1

[Антон Спирин]

Используйте flex.
Демо.

Answer 2

[Denis]

можно по олдскульному
https://jsfiddle.net/dbunt1tled/tanp92ob/

Comments

[алексей]

Спасибо! В итоге сделал на пробу тремя способами, хотя олдскульный конечно самый удачный, странно что сразу до него не дошел.

[Denis]

смотря какой бутстрап если третий то мой случай может и прокатит в моем случае главное слово это "inline-block", пока в мир не вошли гриды и флексы то считаю наиболее универсальным контейнером

Answer 3

[aloky]

flex