我不能中心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}