センタリングNavigationBar

Question

基本的に、私は、画面の中央とLiを中心このナビゲーションバーを中央に配置したいしたいそれぞれ

Htmlの

<div class="navbar"> 
<ul class="nav"> 
    <li class="nav"><a class="nav" href="ts3server://ts.santosrp.com/">TeamSpeak</a></li> 
    <li class="nav"><a class="nav" href="steam://connect/149.202.89.20:27015">US Server</a></li> 
    <li class="nav"><a class="nav" href="steam://connect/158.69.123.91:27015">EU Server</a></li> 
</ul> 

CSS

ul.nav{ 
    display: block; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    text-align: center; 
    height: 3.3em; 
} 

li.nav{ 
    float: left; 
} 

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

Answer 1

li.navの場合、float：leftを削除します。これを使用する：

li.nav{ 
display: inline-block; 
} 

ul.nav{ 
 
    display: block; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    text-align: center; 
 
    height: 3.3em; 
 
} 
 

 
li.nav{ 
 
display: inline-block; 
 
} 
 

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

<div class="navbar"> 
 
<ul class="nav"> 
 
    <li class="nav"><a class="nav" href="ts3server://ts.santosrp.com/">TeamSpeak</a></li> 
 
    <li class="nav"><a class="nav" href="steam://connect/149.202.89.20:27015">US Server</a></li> 
 
    <li class="nav"><a class="nav" href="steam://connect/158.69.123.91:27015">EU Server</a></li> 
 
</ul>