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

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

＆＃13;

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

＆＃13;

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

＆＃13;

我使用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为中心

2 个答案: