Richten Sie die Navigationselemente in Bootstrap nav aus.

Question

Ich versuche, meine Navbar-Elemente horizontal zu zentrieren, aber sie sind nach links ausgerichtet.

Kann jemand Hilfe anbieten?

Dies ist eine Desktop-Ausgabe - nur um klar zu sein, habe ich dieses Problem auf Desktop-Ebene.

Hier ist meine aktuellen Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<header class="container"> 
 
    <div id="menu" class="navbar navbar-default"> 
 
     <div class="navbar-header"> 
 
      <button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="glyphicon glyphicon-chevron-down"></span> 
 
      </button> 
 
     <div class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li class="nav active"><a href=".">Home</a> 
 
       </li> 
 
       <li class="nav"><a href="about.html">About</a> 
 
       </li> 
 
       <li class="nav"><a href="contact.html">Contact</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</header>

Demo:https://jsfiddle.net/cjoasysz/

Answer 1

Mit dem CSS können Sie den Text an der Mitte ausrichten.

.navbar-nav>li>a { 
    text-align: center; 
} 

Demo

Um die Navigation Tabs Zentrieren Sie verwenden können ..

.navbar-header { 
    display: inline-block; 
    float: none; 
    vertical-align: middle; 
} 
.navbar-default { 
    text-align: center; 
} 

Demo 2

Answer 2

Genau dies in Ihrem CSS hinzufügen

ul.nav li { 
    text-align: center; 
} 

Ich habe Ihre Fiddle aktualisiert: https://jsfiddle.net/cjoasysz/1/