Search code examples
htmlcsstwitter-bootstrapcenternavigationbar

Can't Center Bootstrap navigation bar

I was trying to center this: http://jsfiddle.net/MikeStardust/hwhS5/ navigation bar but no luck...

By center i mean the elements aligned in one single line in the center of the navigation... looked up a few solutions but none worked, resulted in a center aligned navigation bar with one element per line.

Bar html: (css & html on the jsfiddle)

 <div class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 
              data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="http://chaoticunited.com/forums">Forums</a></li>
        <li><a href="servers.html">Servers</a></li>
        <li><a href="help.html">Help Center</a></li>
        <li><a href="#" data-toggle="modal" data-target="#vote">Vote</a></li>
        <li><a href="#">Donate</a></li>
      </ul>
    </div><!-- /.nav-collapse -->
  </div><!-- /.navbar

I have this: i.imgur.com/JVh05N1.png

And would like to have this:(Result from photoshop) http://i.imgur.com/B3UcOU9.png

Solution

  • Try changing the display value of .navbar-nav to inline-block and then applying text-align on its parent to control alignment.

    If you need to change the mobile view alignment you can re-apply text-align at that breakpoint.

    .navbar-nav {
    display: inline-block;
}

.navbar-default {
    text-align: center;
}

    Example: http://jsfiddle.net/hwhS5/2/