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 {&nbsp; &nbsp; position: relative;}.brand {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 50%;&nbsp; &nbsp; margin-left: -50px !important;&nbsp; /* 50% of your logo width */&nbsp; &nbsp; display: block;}将徽标居中放置徽标宽度的50％，减去徽标宽度的一半，这样在放大和缩小时就不会出现问题。

Answer 2

最简单的方法是CSS转换：.navbar-brand {&nbsp; transform: translateX(-50%);&nbsp; left: 50%;&nbsp; position: absolute;}演示：http : //codepen.io/candid/pen/dGPZvR居中背景徽标引导3这种方法也适用于徽标的动态大小的背景图像，并允许我们利用文本隐藏类：CSS：.navbar-brand {&nbsp; background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;&nbsp; transform: translateX(-50%);&nbsp; left: 50%;&nbsp; position: absolute;&nbsp; width: 200px; /* no height needed ... image will resize automagically */}HTML：<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text&nbsp; &nbsp; &nbsp; &nbsp; </a>我们也可以使用flexbox。但是，使用此方法，我们必须移至navbar-brand之外navbar-header。这种方式很棒，因为现在我们可以并排放置图像和文本了：bootstrap 3徽标居中.brand-centered {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; position: absolute;&nbsp; width: 100%;&nbsp; left: 0;&nbsp; top: 0;}.navbar-brand {&nbsp; display: flex;&nbsp; align-items: center;}演示：http：//codepen.io/candid/pen/yeLZax要仅在移动设备上获得这些结果，只需将上述css包装在媒体查询中：@media (max-width: 768px) {}