導航欄中的中心品牌

我使用的是Twitter的Bootstrap 3.0，無法爲我的生活弄清楚如何將品牌形象集中在導航欄中。導航欄中的中心品牌

http://jsbin.com/efagoj/99/edit?html,output

<div class="navbar navbar-fixed-top" style="background-color: orange;"> 
    <a class="btn btn-navbar pull-left">Left Text</a> 
    <a class="btn btn-navbar pull-left">Left Text 2</a> 
    <div class="navbar-inner"> 
    <div class="container-fluid" style="text-align: center;"> 
     <a class="brand" href="#" style="margin:0 auto; float: none;"> 
     <img src="http://i.imgur.com/XlPrrVD.png" style="height:30px;">  
     </a> 
    </div> 
    </div> 
    <a class="btn btn-navbar pull-right">Right Text</a> 
</div>

我想要的品牌形象保持居中不管是什麼 - 即使是在它兩側的幾個環節。

來源

2013-09-29 O P

問題是浮動在'.navbar-inner'' div'左邊的菜單項正在縮小它的可用寬度。這使得'div'的「中心」向右移動。 – SombreErmine

如何在保持品牌中心的同時擁有左右元素？ –

（黑客警報）也許試試這個：http://jsbin.com/efagoj/103 –

我覺得這個解決方案可能比將它從頁面流中取出更容易接受。因此，如果您有兩個浮動容器，一個在左側，另一個在右側，兩個寬度相等，則中心的div應該正確定位以進行居中。

http://jsbin.com/efagoj/116/edit

然而，這需要在網頁上有足夠的寬度看的權利。另外，如果導航欄被更改，則必須確保左側和右側的寬度始終相同...因此，使用@media查詢的絕對位置對您來說可能更好。

來源

2013-09-29 08:28:14 SombreErmine

，如果你想保持你的代碼在你的<img/>

添加添加鏈接，您可以刪除您<img/>，並添加這個CSS

.navbar{ 
    background: url("http://i.imgur.com/XlPrrVD.png") top center no-repeat; 
    background-size:100 30px; 
}

http://jsbin.com/efagoj/101/

和代碼http://jsbin.com/efagoj/101/watch?html,css,js,output

。 imgCenter你的形象和這個css

.imgCenter{ 
    position:absolute; 
    left:50%; 
    width:100px; 
    margin-left:-50px; 
}

來源

2013-09-29 07:56:43

這很好，但是，我想讓它保持鏈接。其他想法？ –

我有刷新鏈接。你可以像這樣添加'position：absolute'和中心圖像。 –

導航欄中的中心品牌

回答

相關問題