Всем привет! Есть классическое меню с логотипом бренда на 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>
Простой
Средний
