如何使 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. 它允许我在不使用额外元素的情况下将其居中。