Wie zentriere ich die Elemente aus meiner Navigationsleiste?

Question

Ich möchte, dass die Schaltflächen aus meiner Navigationsleiste in der Mitte der Navigationsleiste angezeigt werden, aber ich kann sie nur scheinbar links oder rechts erscheinen lassen. Wie zentriere ich sie? Hier ist meine CSS-Code:

body{ 
background-color:#d9dbdd; 
} 

#nav { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #333; 
top: 0; 
width: 100%; 
z-index: 999999; 
position:fixed; 
} 

#nav li { 
float: left; 
} 

#nav li a { 
display: block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 

#nav li a:hover:not(.active) { 
background-color: #111; 
} 

.active { 
background-color: #007ed8; 
} 

Jsfiddle: https://jsfiddle.net/ctjhvz6u/

Answer 1

Entfernen Sie die float: left Regel, die Sie auf Sie #nav li erklärt haben und stattdessen fügen Sie display: inline-block hinzu, dann deklarieren Sie text-align: center auf #nav.

Sie können nichts ausrichten, während eine float Regel für das betreffende Element deklariert ist. Jedes Element, das Sie als display: inline-block formatiert haben, kann horizontal ausgerichtet sein, wenn Sie text-align: center für das übergeordnete Element deklarieren.

body { 
 
    background-color: #d9dbdd; 
 
} 
 

 
#nav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 999999; 
 
    position: fixed; 
 
    text-align: center; 
 
} 
 

 
#nav li { 
 
    display: inline-block; 
 
} 
 

 
#nav li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
#nav li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 

 
.active { 
 
    background-color: #007ed8; 
 
}

<ul id="nav" class="bg-inverse navbar-inverse"> 
 
    <li><a class="active" href="#despre">Despre mine</a></li> 
 
    <li><a href="#educatie">Educatie</a></li> 
 
    <li><a href="#aptitudini">Aptitudini</a></li> 
 
    <li><a href="#experienta">Experienta</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
</ul>

Fiddle:https://jsfiddle.net/ctjhvz6u/1/

Answer 2

Sie können es mit dem Flexbox durch Zusatz:

#nav { 
    display: flex; /* displays children inline */ 
    justify-content: center; /* horizontal alignment/centering */ 
} 

Answer 3

diese entfernen:

#nav li { 
    float: left; 
} 

Und in den #nav

display: flex; 
align-items:center; 
justify-content: center; 

Ich schlage vor, Sie

zu verwenden

display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 

Um sicher zu sein, dass der Code auf dem die meisten Browser ausgeführt wird.