Bootstrap Navbar中的中心内容（徽标）

Question

我正试图将我的徽标放在boostrap导航栏中。

我一直在寻找各种各样的方法，我发现一些对我有用，但中心内容会覆盖所有导航栏（无法点击其他链接）。

所以我写了自己的代码。左右拉动没有问题，但我的中心不会中心！

这是我的代码。

（我将背景颜色设置为中心内容的红色，这样我就可以了解它的大小和面积）

HTML

  <nav class="navbar navbar-default" role="navigation">
    <div class="navbar navbar-fixed-top">

   <!--LEFT OF NAVBAR-->
          <div class="navbar-header pull-left">
            <a class="navbar-brand" href="#">
              <span class="glyphicon glyphicon-align-left"></span>
            </a>
          </div>


    <!--CENTER OF NAVBAR-->
          <div class="navbar-header center">
            <a class="navbar-brand" style="background:red;" href="#">Center</a>
          </div>


      <!--RIGHT OF NAVBAR-->
          <div class="navbar-header pull-right">
            <a class="navbar-brand" href="#" style="font-size:1em;">Sign In</a>
          </div>

        </div>
      </nav>

CSS

.center {
  display:inline-block;
  float:none;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

这是我的jsfiddle。 http://jsfiddle.net/ew64yt63/

Answer 1

您可以将text-align:center添加到.navbar

Demo Fiddle

.navbar {
    text-align:center;
}

请注意，您可能需要更改子元素的文本对齐方式。

或者，您可以偏移和转换元素，例如：

Demo Fiddle

.center {
    display:inline-block;
    position:relative;
    left:50%;
    transform:translateX(-100%);
}