ulのコンテンツを中央に移動する方法HTML + CSS

Question

このメニューにリンクを設定することはできません。 "text-align：center;" ulで動作しません。少なくとも1時間は解決策を見つけようとしました。私はウェブ開発には全く新しいです、どんな助けもappriciatedです。

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;}