css - 在 Bootstrap 导航栏中居中内容

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

JSFIDDLE