Question

我正在使用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>

我希望品牌形象无论如何都要保持中心 - 即使它的两边都有几个链接。

Answer 1

我认为这个解决方案可能比从页面流中取出更容易接受。因此，如果您有两个浮动容器，一个在左侧，一个在右侧，两个宽度相等，那么中心的div应正确定位以便居中。

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

然而，这要求页面上的宽度足够正确。另外，如果导航栏被更改，你必须确保左右两侧的宽度始终相同...所以@media查询的绝对位置可能对你更好。

Answer 2

您可以删除<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

如果您想让代码在<img/>

上添加链接

在你的图片和这个css上添加.imgCenter

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

导航栏中的中心品牌

2 个答案: