Собственно проблема:
Есть хедер в котором располагаются элементы(Лого и меню), размеры хедера: 960 х 80 пикселей.
вот макет как они должны быть расположены:
Я написал вот такую разметку:
но не могу понять как сделать что бы блок с логотипом и надписью были на одном уровне с меню? Это можно сделать с помощью
margin
но при уменьшении размеров верстка съезжает, можно ли это сделать при помощи бутстрап?
.menu-top {
white-space: nowrap;
height: 80px;
height: 670px;
background: url(../img/background-img.jpg) no-repeat 50% 50%;
}
#title {
margin-top: 18px;
margin-bottom: 10px;
display: inline-block;
font-size: 30px;
color: #0bcec7;
}
nav a {
color: #000;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
display: block;
vertical-align: middle;
margin-top: 26px;
margin-bottom: 45px;
}
nav a:hover {
text-decoration: none;
color: #00e0d0;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<header>
<div class="container">
<div class="row menu-top">
<div class="col-md-2">
<img src="media/img/logo.png" alt="logo">
<span id="title">You title</span>
</div>
<div class="col-md-8 pull-right">
<nav>
<ul class="list-inline pull-right">
<li><a href="#" class="menu-item">Home</a></li>
<li><a href="#" class="menu-item">About</a></li>
<li><a href="#" class="menu-item">Expertise</a></li>
<li><a href="#" class="menu-item">Teams</a></li>
<li><a href="#" class="menu-item">Works</a></li>
<li><a href="#" class="menu-item">People say</a></li>
<li><a href="#" class="menu-item">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
vertical-align: middle;
- Вы серьезно? Для вертикального выравнивания используйтеflex
илиline-height