Twitter的引導3.0徽標在導航欄

我想中心我的標誌在導航欄，我可以使用或我應該使用內部導航欄網格佈局或者我應該做些別的事情的中心：Twitter的引導3.0徽標在導航欄

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation"> 
     <div class="navbar-header"> 
          <!-- I want this at the center of navbar --> 
      <a class="navbar-brand" href="#"><img src="logo.png"/></a> 
     </div> 
</div>

來源

2013-10-09 torayeff

爲什麼不呢？我應該可以重新設計它 – torayeff

可能重複的[Bootstrap：中心一些導航欄項目]（http://stackoverflow.com/questions/17824914/bootstrap-center-some-navbar-items） – Joseph

這一直在幾次之前問過，如here。

我已經成立了一個的jsfiddle類似於爲你的HTML，用你的Gravatar因爲您的標誌，是不可用：http://jsfiddle.net/q68VS/

重要CSS：

.nav-center { 
    margin:0; 
    float:none; 
} 

.navbar-inner{ 
    text-align:center; 
}

來源

2013-10-10 00:01:05 Joseph

不幸的是，接受的答案是使用HTML對於Bootstrap 2。不過，我想出了幾種使用Bootstrap 3的方法。最簡單的方法是使用css translate。

.navbar-brand { 
    transform: translateX(-50%); 
    left: 50%; 
    position: absolute; 
}

現場演示： http://codepen.io/candid/pen/dGPZvR

這種方法還允許我們使用背景圖片爲標誌，使我們能夠包括文字，不用它的顯示器顯示出來。

HTML：

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text</a>

CSS：

.navbar-brand { 
    background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center/contain no-repeat; 
    width: 200px; 
    transform: translateX(-50%); 
    left: 50%; 
    position: absolute; 
}

現場演示：http://codepen.io/candid/pen/NxWoJL

如果由於某種原因，你只希望做這個移動顯示器上的簡單包裝.navbar品牌一個媒體查詢...

/* CENTER ON MOBILE ONLY */ 
@media (max-width: 768px) { 
.navbar-brand { 
     transform: translateX(-50%); 
     left: 50%; 
     position: absolute; 
    } 
}

來源

2015-12-08 07:00:29

對於flexbox的方法看到這個例子：http://stackoverflow.com/a/34150526/3123861 –

-1

bwillis顯示的方法很好用，但我不得不添加一些邊緣到我的導航欄崩潰。然後對我來說是：

.navbar-brand { 
    transform: translateX(-50%); 
    left: 50%; 
    position: absolute; 
} 

.navbar-collapse { 
     margin-top: 50px; 
}

我還需要我的導航欄，導航中心，然後我補充一下：

.navbar-nav { 
    width: 100%; 
    text-align: center; 
} 
.navbar-nav > li { 
    float: none; 
    display: inline-block; 
}

來源

2016-06-30 21:40:40

Twitter的引導3.0徽標在導航欄

回答

相關問題