居中導航欄

Question

基本上，我想我想在屏幕的中間，李爲中心的這個導航欄分別

中心的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>