导航栏中的中心品牌

我使用的是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'和中心图像。 –

导航栏中的中心品牌

回答

相关问题