如何居中 ul CSS

Question

我有一个用于页面导航的ul，我想将其居中，但我不知道该怎么做。这是我的代码：

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">What Are Drones</a></li>
<li><a href="#">How Do Drones Work</a></li>
<li><a href="#">Buying a Drone</a></li>
 <li><a href="#">About Us</a></li>
</ul>

#nav { list-style-type: none; height: 100px; padding: 0; margin: 0; }
#nav { list-style-type: none; height: 100px; padding: 0; margin: 0; }
#nav li { display:inline-block; position: relative; padding: 0; line-height:    100px; background: #666 url(nav-bg.png) repeat-x 0 0; }
#nav li:hover { background-position: 0 -40px; }
#nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; font-size: 50px; font-family: 'Cuprum', sans-serif; }
#nav li a:hover { color:#0F0 }
#nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; }
#nav li:hover ul { opacity: 1; }
#nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#nav li:hover ul li { height: 30px; line-height: 30px; }
#nav li ul li a { background:#666 }
#nav li ul li a:hover { background:#666 }
#nav { background-color:#666; }

Answer 1

这实际上取决于您要做什么，您的约束以及您尝试构建网站的方式，但对我来说，在您的 #nav 元素上设置text-align:center;相对于它们出现在哪一行而言，将所有单独的菜单元素居中。

如果您需要

深入了解其中的更精细的艺术，可以在此处阅读更多内容：https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

但正如他们所说，这在现代HTML中非常简单。只有当您出于某种原因或其他一些古怪的设置需要支持较旧的浏览器时，它才会变得更加复杂。

Answer 2

以下是使列表居中的最简单解决方案：

#nav {
  display: table;
  margin: auto;
}
#nav > li {
  display: block;
}

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">What Are Drones</a></li>
  <li><a href="#">How Do Drones Work</a></li>
  <li><a href="#">Buying a Drone</a></li>
  <li><a href="#">About Us</a></li>
</ul>

我使用display: table是因为：

1. 它适合其内容，就像display: inline-block
2. 它允许我在不使用额外元素的情况下将其居中。