肚脐中心品牌

Question

我正在使用Twitter的Bootstra3.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;
}