导航栏无法居中答案

【问题标题】：Can't get navigation bar to center导航栏无法居中
【发布时间】：2017-01-05 01:57:27
【问题描述】：

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

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>

【问题讨论】：

标签： css html centering

【解决方案1】：

你可以做两件事来使ul居中：

将text-align: center 添加到nav 以使ul 居中。
重置ul的默认左填充

请看下面的演示：

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;
}

<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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

只需将文本中心对齐到导航

 nav {
     text-align: center;
  }

【讨论】：