Zentrieren Navbar Inhalt

Question

Kann mir bitte jemand helfen, die Links auf meiner Navigationsleiste zu zentrieren. Ich habe es in den letzten 45 Minuten versucht.

Jedes Mal, wenn ich display: flex und justify-content: center es funktioniert, bis die Hamburger-Taste erscheint und angeklickt wird und dann alles schwebt nach links.

Jede Hilfe würde massiv geschätzt werden.

Danke

Reece

.navbar { 
 
    background-color: #000; 
 
    justify-content: center; 
 
    height: auto; 
 
    font-family: Gill Sans, Verdana; 
 
    font-size: 15px; 
 
    line-height: 18px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-weight: bold; 
 
} 
 
nav li:hover { 
 
    background-color: #C00; 
 
    margin: 0; 
 
}

<nav> 
 
    <div class="navbar-container"> 
 
    <!--NAVBAR CONTAINER START --> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="navbar-header"> 
 
     <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle" data-target="#navbar" data-toggle="collapse" type="button"> 
 

 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#"></a> 
 

 
     </div> 
 

 
     <div class="navbar-collapse collapse" id="navbar"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"> 
 
      <a href="#header-container"><strong>HOME</strong></a> 
 
      </li> 
 

 

 
      <li> 
 
      <a href="#meettheband-container"><strong>MEET THE BAND</strong></a> 
 
      </li> 
 

 

 
      <li> 
 
      <a href="#photo-container"><strong>PHOTOS</strong></a> 
 
      </li> 
 

 

 
      <li> 
 
      <a href="#video-container"><strong>VIDEOS</strong></a> 
 
      </li> 
 

 

 
      <li> 
 
      <a href="#getintouch-container"><strong>GET IN TOUCH</strong></a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
    <!-- NAVBAR CONTAINER END --> 
 
    </nav>

Answer 1

prüfen diesen Stift aus http://codepen.io/Danstan/pen/ENajRb die Links

ul.nav.navbar-nav { 
display: table; 
margin: 0 auto; 
float: none !important; 

im Mittelpunkt stehen wird

}

Answer 2

.navbar { 
    background-color: #000; 

    height: auto; 
    font-family: Gill Sans, Verdana; 
    font-size: 15px; 
    line-height: 18px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-weight: bold; 
    text-align:center; 
} 

.navbar .navbar-header { 
    display:table; 
    width:auto; 
    margin:auto; 
} 

nav li:hover { 
    background-color: #C00; 
    margin: 0; 
} 

Answer 3

Versuchen Sie folgendes: -

/* Center Nav Bar */ 
    #nav ul { 
text-align: center; 
} 

Link: - http://themes.typepad.com/guide/2011/12/navbar-center.html