So zentrieren Sie das Nav

Question

Ich fand diese wirklich einfache Möglichkeit, responsive Menü auf w3schools (article) zu machen, aber ich habe seit ein paar Tagen kämpfen versucht, es horizontal zu zentrieren.

html

<ul class="topnav"> 
    <li><a 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> 
    <li class="icon"> 
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
    </li> 
</ul> 

CSS

/* Remove margins and padding from the list, and add a black background color */ 
ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

/* Float the list items side by side */ 
ul.topnav li {float: left;} 

/* Style the links inside the list items */ 
ul.topnav li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

/* Change background color of links on hover */ 
ul.topnav li a:hover {background-color: #111;} 

/* Hide the list item that contains the link that should open and close the topnav on small screens */ 
ul.topnav li.icon {display: none;} 

Answer 1

machte ich eine Geige von Ihnen Code verknüpft: https://jsfiddle.net/gqm7zdf9/

Eine solide Option ist ein Wrapper um Ihre UL so hinzuzufügen, dass Sie sich bewegen können die Hintergrundfarbe dort. Dann positionieren Sie es in seiner Verpackung.

HTML

<div class="nav-wrapper"> 
    <ul class="topnav"> 
     ... 
    </ul> 
</div> 

zusätzliche CSS

div.nav-wrapper { 
    background-color: #333; 
} 
div.nav-wrapper ul.topnav { 
    display: inline-block; 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
} 

 

---

Wenn Sie in der Lage sind (abhängig von den Browsern Sie unterstützen müssen) zu uns e display:flex, gibt es eine noch einfachere Möglichkeit. Sie müssen nur einige CSS hinzuzufügen:

ul.topnav { 
    /* ... */ 
    display: flex; 
    justify-content: center; 
} 

https://jsfiddle.net/gqm7zdf9/1/

 
ich dich von dort ...