Bootstrap Navbar中的中心内容(徽标)

时间:2014-12-03 15:24:16

标签: html css twitter-bootstrap navbar

我正试图将我的徽标放在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/

1 个答案:

答案 0 :(得分:4)

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

Demo Fiddle

.navbar {
    text-align:center;
}

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

或者,您可以偏移和转换元素,例如:

Demo Fiddle

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