无法将导航栏置于中心位置

Question

已经尝试了很多不同的东西，但无法弄清楚为什么它不会居中。任何帮助都会很棒！

nav {
  font-size: 18px;
}
ul {
  list-style-type: none;
  display: inline-block;
}
li {
  display: inline-block;
}
li a {
  color: #F55F5F;
  padding: 10px 15px;
  text-decoration: none;
  text-align: center;
}

<nav>
  <ul>
    <li><a href="Home.html">Home</a>
    </li>
    <li><a href="Services.html">Services</a>
      <li><a href="About.html">About Us</a>
      </li>
      <li><a href="Contact.html">Contact Us</a>
  </ul>
</nav>

Answer 1

您可以做两件事来集中ul：

1. 将text-align: center添加到nav，将ul置于其中心。

2. 重置ul

的默认左边距

见下面的演示：

＆＃13;
＆＃13;
nav {
  font-size: 18px;
  text-align: center;
}
ul {
  padding: 0;
  list-style-type: none;
  display: inline-block;
}
li {
  display: inline-block;
}
li a {
  color: #F55F5F;
  padding: 10px 15px;
  text-decoration: none;
  text-align: center;
}
＆＃13;
<nav>
  <ul>
    <li><a href="Home.html">Home</a>
    </li>
    <li><a href="Services.html">Services</a>
      <li><a href="About.html">About Us</a>
      </li>
      <li><a href="Contact.html">Contact Us</a>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

Answer 2

nav{
  text-align: center;
  background: green;
}
ul{
  padding: 0;
}

Answer 3

将文本对齐中心放到导航

 nav {
     text-align: center;
  }