Bootstrap nav bar brand image vertically center - html

Question

Hi I'm playing around with a bootstrap theme. Here the problem was navbar-brand image is not vertically align center with the navbar.
Live demo
<div class="row">
<div class="nave_menu">
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="./images/Agrocell.png" alt="" style="max-width:140px;">
</a>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>FEATURES</li>
<li>ABOUT US</li>
<li>PRODUCTS</li>
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>

Answer 1

Remove .container-fluid { margin-top: 20px; } from style.css and add #bs-example-nav-collapse-1 { margin-top: 20px;}

Answer 2

You can fix this by new feature of CSS3 flexbox, for that you need to apply some CSS on your classes.
.container-fluid {
display: flex;
align-items: center;
}
.navbar-brand {
padding: 0 15px; // for remove top padding
}
.collapse.navbar-collapse {
margin-left: auto;
}
from that your navbar is vertically center.