中央圖像到引導程序中的導航標題4

Question

我創建了一個帶有新的引導程序4 alpha框架工作的導航欄標題。

<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; 
} 

我想有一個標識爲中心的導航欄，但不知道如何把它做，因爲當我穿上到，我的右側圖標向下移動。

bootply

Answer 1

你只需要CSS

下面是我如何實現你在找什麼工作示例的一個街區。

我添加了一個img標記作爲nav欄的子項，然後將其設置爲波紋管代碼。

試試這個：

.navbar img { 
    display:block; 
    margin: 0px auto; 
} 

倘若當你開始填充navbar您發現該標誌不再中心然後嘗試此代碼爲您的標誌

或者試試這個：

#logo { 
    position: absolute; 
    left: 50%; 
    margin-left: -50px !important; /* 50% of your logo width */ 
    display: block; 
} 

此方法不會自動生效，但如果您的內容用於抵銷徽標，則該方法將不起作用。

工作示例：http://www.bootply.com/XVlsafgbzD