如何將ul中的內容移至中心HTML + CSS

Question

我無法將此菜單與鏈接居中。 「text-align：center;」在ul不起作用，我試圖找到一個至少1小時的解決方案。我對網絡開發很陌生，任何幫助都很有用。

ul { 
 
list-style-type: none; 
 
background-color: #3A3A3A; 
 
text-align: center; 
 
margin: 0; 
 
padding: 0; 
 
overflow: hidden; 
 
} 
 

 
li { 
 
display: inline; 
 
float: left; 
 
font-size: 22px 
 
} 
 

 
li a { 
 
display: block; 
 
padding: 20px 20px; 
 
text-decoration: none; 
 
} 
 

 
li a:hover { 
 
color: #00DBFF; 
 
}

<div> 
 
<ul> 
 
<li><a href="login.html"><b>LOGIN</b></a></li> 
 
<li><a href="register.html"><b>REGISTER</b></a></li> 
 
<li><a href="dam.html"><b>DAM</b></a></li> 
 
<li><a href="herr.html"><b>MÄN</b></a></li> 
 
<li><a href="exempel.html"><b>EXEMPEL</b></a></li> 
 
<li><a href="test.html"><b>TEST</b></a></li> 
 
<li><a href="logout.html"><b>LOGOUT</b></a></li> 
 
</ul> 
 
</div>

Answer 1

li { 
    display: inline; 
    /*float: left;*/ /* <----- */ 
    font-size: 22px 
} 

li a { 
    display: inline-block; /* <----- */ 
    padding: 20px 20px; 
    text-decoration: none; 
} 

JSFiddle

Answer 2

ul { 
 
    list-style-type: none; 
 
    background-color: #3A3A3A; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    display: inline; 
 
    float: left; 
 
    font-size: 22px 
 
} 
 
li a { 
 
    display: block; 
 
    padding: 20px 20px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    color: #00DBFF; 
 
}

<div> 
 
    <ul> 
 
    <li><a href="login.html"><b>LOGIN</b></a> 
 
    </li> 
 
    <li><a href="register.html"><b>REGISTER</b></a> 
 
    </li> 
 
    <li><a href="dam.html"><b>DAM</b></a> 
 
    </li> 
 
    <li><a href="herr.html"><b>MÄN</b></a> 
 
    </li> 
 
    <li><a href="exempel.html"><b>EXEMPEL</b></a> 
 
    </li> 
 
    <li><a href="test.html"><b>TEST</b></a> 
 
    </li> 
 
    <li><a href="logout.html"><b>LOGOUT</b></a> 
 
    </li> 
 
    </ul> 
 
</div>

，如果你想嘗試使用此方法：li {text-align: center;}