Bootstrap 3 Navbar中的居中品牌徽标

Question

我正在尝试实现Bootstrap 3导航栏，以使品牌徽标始终保留在中间。这是代码：<div class="navbar navbar-fixed-top navbar-default">  <div class="navbar-inner">    <div class="container">      <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">                        <span class="icon-bar"></span>                    <span class="icon-bar"></span>                    <span class="icon-bar"></span>                    </button>      <a class="brand" style="margin: 0; float: none;" href="#">        <img src="/Content/themes/next/images/logo.png" /></a>      <div class="nav-collapse">        <ul class="nav">          <li> <a href="#">Item 1</a></li>          <li> <a href="#">Item 1</a></li>          <li> <a href="#">Item 1</a></li>        </ul>      </div>      <ul class="nav pull-right">        <li>          <a href="#">            <div class="nextCog"></div>          </a>        </li>      </ul>      <span class="navbar-text pull-right">superpup1 </span>    </div>  </div></div>它使导航栏看起来很漂亮： 在此处输入图片说明但是，我希望徽标（绿色）始终保持在中间。我将这种样式添加到带有“ brand”类的标签中：<a class="brand" style="margin: 0; float: none; text-align:center" href="#">                <img src="/Content/themes/next/images/logo.png" /></a>它部分解决了问题：徽标位于中间，但将其余的导航栏元素向下推：在此处输入图片说明我想消除这种不良影响。您能提出解决方案吗？从一开始就将徽标居中可能是错误的方法？

Answer 1

尝试这个：

.navbar {

    position: relative;

}

.brand {

    position: absolute;

    left: 50%;

    margin-left: -50px !important;  /* 50% of your logo width */

    display: block;

}

将徽标居中放置徽标宽度的50％，减去徽标宽度的一半，这样在放大和缩小时就不会出现问题。

Answer 2

最简单的方法是CSS转换：

.navbar-brand {

  transform: translateX(-50%);

  left: 50%;

  position: absolute;

}

演示：http : //codepen.io/candid/pen/dGPZvR

居中背景徽标引导3

这种方法也适用于徽标的动态大小的背景图像，并允许我们利用文本隐藏类：

CSS：

.navbar-brand {

  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;

  transform: translateX(-50%);

  left: 50%;

  position: absolute;

  width: 200px; /* no height needed ... image will resize automagically */

}

HTML：

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text

        </a>

我们也可以使用flexbox。但是，使用此方法，我们必须移至navbar-brand之外navbar-header。这种方式很棒，因为现在我们可以并排放置图像和文本了：

bootstrap 3徽标居中

.brand-centered {

  display: flex;

  justify-content: center;

  position: absolute;

  width: 100%;

  left: 0;

  top: 0;

}

.navbar-brand {

  display: flex;

  align-items: center;

}

演示：http：//codepen.io/candid/pen/yeLZax

要仅在移动设备上获得这些结果，只需将上述css包装在媒体查询中：

@media (max-width: 768px) {

}