0

我正在使用 Twitter 的 Bootstrap 3.0，但我一生都无法弄清楚如何在导航栏中将品牌形象居中。

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

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

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

4

2 回答 2

2

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

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

然而，这需要页面上有足够的宽度才能看起来正确。另外，如果导航栏发生变化，您必须确保左右始终保持相同的宽度......因此，@media 查询的绝对位置可能对您更有利。

于 2013-09-29T08:28:14.080 回答
0

您可以删除<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;
}
于 2013-09-29T07:56:43.577 回答