Помогите выровнять по вертикали контент верхнего меню. Использую bootstrap 3...
HTML
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="http://static2.wikia.nocookie.net/__cb20130816092518/despicableme/images/a/a7/DespicableMe.png" alt="Logo" class="navbar-logo">
</a>
</div>
<div class="collapse navbar-collapse navbar-right nav-list">
<ul class="nav navbar-nav">
<li><a class="nav-link">About</a></li>
<li><a class="nav-link">Our solution</a></li>
<li><a class="nav-link">Gallery</a></li>
<li>
<button type="button" class="btn navbar-btn">Play<i class="fa fa-facebook-square fa-2x"></i>
</button>
</li>
</ul>
</div>
</div>
</nav>
CSS
.navbar {
font-size: 18px;
box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2);
vertical-align: middle;
}
.navbar-brand {
padding: 0;
margin: 0;
}
.navbar-brand img {
height: 100%;
margin: 8px;
display: block;
}
.nav-list a {
margin-right: 1em;
}
.nav-list button {
padding-left: 1em;
padding-right: 1em;
text-align: left;
font-weight: bold;
font-size: 18px;
}
.nav-list button i {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
button {
background-color: green;
}