Center-Menüleiste Links

Question

Ich versuche, die Menüleistenlinks zu zentrieren. Jedes Mal, wenn ich versuche, es zu zentrieren, setzt es jeden Link auf eine neue Zeile. Also mache ich es float:center; und es macht jede Verbindung zu einer neuen Linie und zentriert sie nicht alles. Irgendwelche Ideen?

body { 
 
    margin: 0; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 
.active { 
 
    background-color: #4CAF50; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a> 
 
    </li> 
 
    <li><a href="#news">News</a> 
 
    </li> 
 
    <li><a href="#contact">Contact</a> 
 
    </li> 
 
    <li><a href="#about">About</a> 
 
    </li> 
 
</ul>

Answer 1

Verwendung display:flex und justify-content:center in Ihrem ul (entfernen Sie die float:left von li)

Float:center existiert nicht.

body { 
 
    margin: 0; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    display:flex; 
 
    justify-content:center 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 
.active { 
 
    background-color: #4CAF50; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a> 
 
    </li> 
 
    <li><a href="#news">News</a> 
 
    </li> 
 
    <li><a href="#contact">Contact</a> 
 
    </li> 
 
    <li><a href="#about">About</a> 
 
    </li> 
 
</ul>

Answer 2

Nur text-align:center zu Ihrem ul und display:inline-block; zu Ihrem li wie folgt hinzu:

ul { 
    text-align:center; 
} 
li { 
    display:inline-block; 
} 

Hier eine jsFiddle mit über Codes ist: https://jsfiddle.net/AndrewL32/4jendh7j/