Как выровнять элементы внутри блоков по вертикали?

Question

[denism300]

Есть контейнер

<div class="row">
	<div class="col-xs-12 col-md-3 logo-container"></div>
	<div class="col-xs-12 col-md-4 search"></div>
	<div class="col-xs-12 col-md-5 ph-cart"></div>
</div>

Как выровнять по вертикали содержимое?
Делаю так:

.row {
	display: -webkit-flex;
	display: -o-flex;
	display: -ms-flex;
	display: -moz-flex;
	display: flex;
	align-items: center;
}

все ок, но в режиме адаптивности контейнеры не выстраиваются в колонку, т.к. по умолчанию flex-direction: row.

Answer 1

[milonski]

Ну так сделайте в адаптивном варианте направление по вертикали.

Answer 2

[MegaPuxapb]

col -ам добавьте класс:
align-self-center

Comments

[denism300]

у меня bootstrap 3, там нет такого свойства
а если в стилях добавить им свойство align-self: center
то ничего не меняется

[MegaPuxapb]

denism300,
на .row и .col ничего не вешайте. сломаете бутсраповскую сетку.
если флексами то в колонке делаете блок и:

.block {
  display: flex;
  align-items: center;
  height: 150px;
}

если не флексами

Answer 3

[Greg Orekhov]

line-height одинаковый выставить, размером в высоту строки (ну или в высоту лого)