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

Всем привет! Есть классическое меню с логотипом бренда на bootstrap. Фидл Для текущего размера картинки логотипа - размер по дизайну должен быть 88px. Как сделать так, чтобы независимо от размеров лого оно каждый раз выравнивалось вместе с меню по вертикальному центру (с аналогичными отступами) и при этом было кроссбраузерным ie9+? Употребление в данном случае padding, marging, line-height, position:absolute - дурной тон. Пробовал оборачивать с комбинацией table table-cell vervical-align middle, но почему-то не срабатывает.. Как быть?
.navbar {
  height: 88px;
}

<div class="navbar navbar-inverse">
  <div class="container">
    <!-- Header -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="http://placehold.it/66x61">Bootstrap 3 Skeleton
      </a>
    </div>
    <!-- Navbar Links -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</div>
  • Вопрос задан
  • 478 просмотров
Решения вопроса 1
DirecTwiX
@DirecTwiX
"display: flex;" уже предлагали?
Пригласить эксперта
Ответы на вопрос 1
miraage
@miraage
Старый прогер
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы