Question

我试图制作一个Bootstrap导航栏，其右侧和左侧包含带有居中标题的图标。我无法让文字正确居中。

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-header pull-left">
        <a href="#" id="navMenu" class="navbar-brand"><i class="fa fa-bars fa-lg" aria-hidden="true"></i></a>
      </div>

      <!--  Center the contents of this element in the navbar -->
      <div class="navbar-header nav-element-center">
        <span class="h4 ">Centered Title</span>
      </div>


      <div class="navbar-header pull-right">
        <a href="#" id="navMenu" class="navbar-brand pull-right"><i class="fa fa-user-plus" aria-hidden="true"></i></a>
      </div>
    </div>
  </div>
</nav>

测试示例：https://jsfiddle.net/goyosoyo/aw0219a4/

注意：我给div添加了彩色边框，以便我可以看到发生了什么。

我错过了什么？

Answer 1

你可以这样做：

HTML：

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-header pull-left">
        <a href="#" id="navMenu" class="navbar-brand"><i class="fa fa-bars fa-lg" aria-hidden="true"></i></a>
      </div>
      <div class="navbar-header pull-right">
        <a href="#" id="navMenu" class="navbar-brand pull-right"><i class="fa fa-user-plus" aria-hidden="true"></i></a>
      </div>
      <!--  Center the contents of this element in the navbar -->
      <div class="nav-element-center">
        <span class="h4 ">Centered Title</span>
      </div>
    </div>
  </div>
</nav>

CSS：

.nav-element-center {
  text-align: center;
  margin-top: 14px;
}

在Bootstrap导航栏

1 个答案:

JSFIDDLE