如何居中 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 {
  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 因为：

符合内容，如display: inline-block
它允许我在不使用额外元素的情况下将它居中。

Answer 2

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

如果您需要深入了解它，可以在这里阅读更多内容：https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

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

如何居中 ul CSS

How to center a ul CSS

html

css

html-lists

centering