center image into nav header in bootstrap 4

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"><a href="#" class="open-pulse-sidebar"><i class="ion-grid pulse-icons"></i></a></li>
    </ul>

    <ul class="nav navbar-nav float-xs-right">
        <li class="nav-item"><a href="#" class="toggle-search"><i class="ion-ios-search-strong pulse-icons"></i></a></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"><a href="#" class="open-chat-sidebar"><i class="ion-chatboxes pulse-icons"></i></a></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

Like this? ---> http://stackoverflow.com/questions/23400234/centering-brand-logo-in-bootstrap-3-navbar — s0rfi949, Nov 08 '16 at 19:06
Is this all the content you you will have in the `nav` for the time being? — DominicValenciana, Nov 08 '16 at 21:58

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

center image into nav header in bootstrap 4

1 Answers1

You just need one block of css

Try this:

Or try this:

Working Example: http://www.bootply.com/XVlsafgbzD