Как выровнить блок по вертикали на Bootstrap?

Question

[ILoveYAnny]

Не могу выравнить блоки во вертикали в данном коде, display:table не работает :( Как сделать ?

<div class="container">
  <div class="row topheader">
       <div class="col-xs-2">
                <img src="/images/logoss.jpg">
       </div>
      <div class="col-xs-4">
                <div class="city">Город </div>
                <div class="telheader">Телефон</div>
     </div>
     <div class="col-xs-3">Информация</div>
     <div class="col-xs-3">Баннер</div>
     </div>
</div>

Answer 1

[Алексей Евлампьев]

Требуется центрировать блоки по вертикали, типа на уровне середины изображения?
В таком случае родительскому блоку можно поставить vertical-align: middle
А дочерним display: inline-block

Comments

[ILoveYAnny]

Насколько мне известно vertical-align: middle работает для таблиц :(

[Алексей Евлампьев]

ILoveYAnny:
Нет, для inline-block vertical-align работает>
Но для дочернего элемента, в этом я немного промахнулся

Вот это должно работать

<div class="container">
    <div class="row vertical-align"> <!-- 
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>
.vertical-align {
    display: flex;
    align-items: center;
}

The Output

[ILoveYAnny]

Alevs: Да сработало, спасибо. Но насколько способ адаптивен, слышал что display:flex; не работает на iOS

[nurise]

ILoveYAnny: https://css-tricks.com/using-flexbox/

Answer 2

[digamer]

Можно использовать вот это решение, допилив для себя.