center image into nav header in bootstrap 4 - html

Question

i created a navbar header with the new bootstrap 4 alpha frame work.
<nav class="navbar navbar-light navbar-fixed-top pulse-header">
<ul class="nav navbar-nav navbar-nav-left">
<li class="nav-item"><i class="ion-grid pulse-icons"></i></li>
</ul>
<ul class="nav navbar-nav float-xs-right">
<li class="nav-item"><i class="ion-ios-search-strong pulse-icons"></i></li>
<li class="nav-item">
<a href="#" class="open-notification-sidebar">
<i class="ion-earth pulse-icons"></i>
<span class="pulse-circle"></span>
</a>
</li>
<li class="nav-item"><i class="ion-chatboxes pulse-icons"></i></li>
</ul>
</nav>
css
.pulse-header {
height: 60px;
min-height: 60px;
max-height: 60px;
background-color: #1f2532;
padding: 13px 15px;
}
.pulse-header .navbar-nav-left {
margin-left: 20px;
}
.pulse-header .nav > .nav-item {
margin-right: 20px;
}
.pulse-header .nav > .nav-item > a {
position: relative;
}
i would like to have a logo centered in the navbar but do not know how to get it done, cause when i put on into, my icons on the right side are moving down.
bootply

Answer 1

You just need one block of css
Here is a working example of how I achieved what you're are looking for.
I added an img tag as a child of the nav bar and then set it to bellow code.
Try this:
.navbar img {
display:block;
margin: 0px auto;
}
In the event that when you begin to populate the navbar you find that the logo no longer centers then attempt this code for your logo
Or try this:
#logo {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
This method will not be as automatic however will work if your content beigns to offset the logo.
Working Example: http://www.bootply.com/XVlsafgbzD