title: center image into nav header in bootstrap 4
body: <p>i created a navbar header with the new bootstrap 4 alpha frame work.</p>
  
  <pre><code>    &lt;nav class="navbar navbar-light navbar-fixed-top pulse-header"&gt;
      &lt;ul class="nav navbar-nav navbar-nav-left"&gt;
          &lt;li class="nav-item"&gt;&lt;a href="#" class="open-pulse-sidebar"&gt;&lt;i class="ion-grid pulse-icons"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul class="nav navbar-nav float-xs-right"&gt;
          &lt;li class="nav-item"&gt;&lt;a href="#" class="toggle-search"&gt;&lt;i class="ion-ios-search-strong pulse-icons"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a href="#" class="open-notification-sidebar"&gt;
                  &lt;i class="ion-earth pulse-icons"&gt;&lt;/i&gt;
                  &lt;span class="pulse-circle"&gt;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a href="#" class="open-chat-sidebar"&gt;&lt;i class="ion-chatboxes pulse-icons"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.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 &gt; .nav-item {
    margin-right: 20px;
  }
  
  .pulse-header .nav &gt; .nav-item &gt; a {
    position: relative;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="http://www.bootply.com/tZ9tzdX9jA" rel="noreferrer">bootply</a></p>