我无法居中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}