Wie zentriere ich diese Bootstrap-Navigationsleiste?

Question

Aktuelle Erscheinung navbar:

Ich will es so aussehen:

Text-align: center funktioniert nicht. Ebenso wenig rechtfertigen, schwimmen usw.

HTML

<div class="navbar navbar-default"> 
     <div class="navbar-header"> 
     </div> 
     <ul class="nav navbar-nav"> 
     <li class="#"><a href="#">HOME</a></li> 
     <li><a href="#">ABOUT</a></li> 
      <li><a href="#">PAGE</a></li> 
      <li class="divider-vertical"></li> 
      <li><a href="#">BLOG</a></li> 
     <li><a href="#">TESTIMONALS</a></li> 
     </ul> 
     </div> 

CSS

/* navbar */ 
.navbar-default { 
    background-color: #15b6b8; 
    border-color: #fff; 
    font-weight: bold; 
    } 

/* Link */ 
.navbar-default .navbar-nav > li > a { 
    color: #fff; 

} 
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
    color: #04cccc; 
} 

Answer 1

Verwendung unter css

.navbar-nav { 
    width: 100%; 
    text-align: center; 
    } 
    .navbar-nav > li { 
     float: none; 
     display: inline-block; 
    } 

jsfiddle example

Answer 2

geht durch diesen JSFiddle

http://jsfiddle.net/bdd9U/2/

<div class="container"> 
    <nav class="navbar navbar-default" role="navigation"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div><!-- /.navbar-collapse --> 
    </nav> 
<h1>Home</h1> 

</div> 

CSS:

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

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

Answer 3

In folgenden Fälle Stil.

.navbar{ 
    text-align:center 
} 

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

Demo Click here