Bootstrap 导航栏中的中心内容（徽标）

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%);
}