Make center <ul><li></li></ul> tag

Question

Wie mache ich Mitte der Liste in der <div> Tag? Unten ist Codierung, die ich derzeit für das Menü verwende.

HTML

<div> 
    <ul class="topnav" id="myTopnav"> 
     <li><a class="active" href="#home">HOME</a></li> 
     <li><a href="#news">NEWS</a></li> 
     <li><a href="#contact">CONTACT</a></li> 
    </ul> 
</div> 

CSS

ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #0d47a1; 
    box-shadow: 0px 5px 10px #000; 
    position: absolute; 
    z-index: 10; 
    width: 100%; 
} 
ul.topnav li {float: left; zoom: 1;} 
ul.topnav li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 40px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
    font-family: Calibri; 
} 
ul.topnav li a:hover {background-color: #1976d2;} 

Answer 1

Hier ist eine Arbeitsversion, mit ein wenig verändert CSS. Es verwendet Set-Breiten, aber das ist meistens gut, da wir dynamische Größen verwenden.

* { box-sizing: border-box;} 
 
div { 
 
    background-color: #0d47a1; 
 
    box-shadow: 0px 5px 10px #000; 
 
    position: absolute; 
 
    z-index: 10; 
 
    left: 0; 
 
    right: 0; 
 
    display: block; 
 
    } 
 
ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    display: block; 
 
    width: 25em; 
 
} 
 
ul.topnav li {display: inline-block;, text-align: center; min-width: 8em; } 
 
ul.topnav li a { 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 1em; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 1.2em; 
 
    font-family: Calibri; 
 
} 
 
ul.topnav li a:hover {background-color: #1976d2;}

<div> 
 
    <ul class="topnav" id="myTopnav"> 
 
     <li><a class="active" href="#home">HOME</a></li> 
 
     <li><a href="#news">NEWS</a></li> 
 
     <li><a href="#contact">CONTACT</a></li> 
 
    </ul> 
 
</div>