Greg Greg - 5 months ago 8
CSS Question

Centering contents in a Bootstrap navbar

I'm trying to make a Bootstrap navbar that contains icons on the right and left with a centered title. I'm not able to get the text to center properly.

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


test example: https://jsfiddle.net/goyosoyo/aw0219a4/

Note: I've given the divs a colorized border so that I could see what was happening.

What am I missing?

Answer

You can do it like this:

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

Comments