我不能中心ul

Question

我不能中心ul這是一個菜單。我試過margin: 0 auto;和text-align: center;，並試圖更改margin的值，但沒有任何效果。

這是我的CSS：

html { 
font-family: 'Exo';} 

body { 
background: #1a1a1a;} 

.nav { 
margin-left: 50%;} 

.nav li { 
display: inline-block; 
color: white; 
padding: 15px; 
margin-left: 10px; 
border: 3px solid #2E9FFF; 
text-align: center; 
width: 225px; 
background-color: DodgerBlue; 
font-size: 200%; 
transition: ease 0.5s; 
text-decoration: none;} 

.nav li:hover { 
cursor: pointer; 
border: 3px solid #2E9FFF; 
border-radius: 50px; 
background-color: #1a1a1a;} 

.nav li a { 
text-decoration: none; 
color: white;} 

這是我的HTML：

<ul class="nav"> 
    <li><a href="#">Najdi si hru</a></li> 
    <li><a href="#">Jaký je náš cíl?</a></li> 
    <li><a href="#">Kontakt</a></li> 
</ul> 

Answer 1

這裏是你可以上手的一種方式。

確保您清零ul.nav上的填充並應用text-align: center以保持嵌入塊居中。

請注意，爲了演示的目的，我將寬度和字體大小縮小了一些，但是您會得到一般想法。

如果元素足夠寬，它們將包裝到第二行。

html { 
 
    font-family: 'Exo'; 
 
} 
 
body { 
 
    background: #1a1a1a; 
 
} 
 
.nav { 
 
    margin-left: 100px; 
 
    border: 1px dotted yellow; 
 
    text-align: center; 
 
    padding: 0; 
 
} 
 
.nav li { 
 
    display: inline-block; 
 
    color: white; 
 
    padding: 15px; 
 
    border: 3px solid #2E9FFF; 
 
    text-align: center; 
 
    width: 100px; 
 
    background-color: DodgerBlue; 
 
    font-size: 100%; 
 
    transition: ease 0.5s; 
 
    text-decoration: none; 
 
} 
 
.nav li:hover { 
 
    cursor: pointer; 
 
    border: 3px solid #2E9FFF; 
 
    border-radius: 50px; 
 
    background-color: #1a1a1a; 
 
} 
 
.nav li a { 
 
    text-decoration: none; 
 
    color: white; 
 
}

<ul class="nav"> 
 
    <li><a href="#">Najdi si hru</a></li> 
 
    <li><a href="#">Jaký je náš cíl?</a></li> 
 
    <li><a href="#">Kontakt</a></li> 
 
</ul>

Answer 2

試試這個

.nav {/*margin-left: 50%;*/ min-width:20%; display:table; margin:0 auto; padding:0}