html - 将我的导航按钮居中

Question

我尝试了很多解决方案来使我的导航按钮居中，但没有奏效，而且我没有找到正确的解决方案。我试过空格，但我希望它能响应。

这是我的 HTML:

<ul>

    <li class="btn"><a href="">The performances</a></li>

    <li class="btn"><a href="">About Us</a></li>

    <li class="btn"><a href="">Book Now !</a></li>


</ul>

这是我的 CSS 代码:

nav li{
    display: inline-block;
    padding: 10px;}

nav a{
    color:#fff;
    text-decoration:none;
}

nav .btn{
  -webkit-border-radius: 17;
  -moz-border-radius: 17;
  border-radius: 17px;
  font-family: Georgia;
  color: #fff;
  font-size: 20px;
  background: #8B0000;
  padding: 5px 10px 5px 10px;
  margin:0 auto;
  text-decoration: none;
 text-align: center;}

.btn:hover{
  background: #A26161;
  text-decoration: none;
}

谢谢你的建议!

Answer 1

您的 CSS 包含一个 nav 元素，但 HTML 没有。我加了一个，还加了nav { text-align: center; :

nav {
  text-align: center;
}

nav li {
  display: inline-block;
  padding: 10px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

nav .btn {
  -webkit-border-radius: 17px;
  -moz-border-radius: 17px;
  border-radius: 17px;
  font-family: Georgia;
  color: #fff;
  font-size: 20px;
  background: #8B0000;
  padding: 5px 10px 5px 10px;
  margin: 0 auto;
  text-decoration: none;
  text-align: center;
}

.btn:hover {
  background: #A26161;
  text-decoration: none;
}

<nav>
  <ul>

    <li class="btn"><a href="">The performances</a></li>

    <li class="btn"><a href="">About Us</a></li>

    <li class="btn"><a href="">Book Now !</a></li>


  </ul>
</nav>