如何将ul元素水平对齐到中心

Question

我无法将 ul 中包含的菜单与其容器的水平中心对齐。该怎么做？

查看live demo of the menu on jsFiddle。

<li><a href="aboutus.php">AboutUs</a>
    <ul class="sub">
        <li><a href="aboutsquare.php">About Square Innovations</a></li>
        <li><a href="ourvision.php">Our Vision</a></li>
        <li><a href="ourmission.php">Our Mission</a></li>
        <li><a href="trainerprofiles.php">Trainer Profiles</a></li>
        <li><a href="funclass.php">Fun In Our ClassRooms</a></li>
    </ul>
</li>

Answer 1

您可以将ul 元素作为页面流中的内联级元素进行寻址，同时保留其块级特征（使用inline-block 显示值）——应用此功能后，它可以简单地在其内部对齐像任何内联元素一样的容器，使用text-align。

要实现这一点，请添加以下规则：

#container {
    text-align: center;
}
ul {
    display: inline-block;
}

这是updated demo。

参考

• display on Mozilla Developer Network

---

免责声明：对inline-block 的支持有些有限不！它现在实际上已经很宽了，请参阅compatibility table on caniuse.com。

Answer 2

只要菜单保持在一行，就有一个非常简洁、完全跨浏览器和动态的“技巧”来实现这一点。这里解释得很好：http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

根据我的经验，旧版浏览器通常不支持针对此问题的内联块。老实说，我从不使用它。我总是选择 Matthew James Taylor 描述的聪明方法。

编辑： 根据要求，我将简要介绍该技术。 您的 html 应该看起来像一个正常的链接列表，周围有一个额外的包装 div。像这样的：

<div class="menu-wrapper">
  <ul>
    <li><a ...>link</a></li>
    <li><a ...>link</a></li>
    <li><a ...>link</a></li>
  </ul>
</div>

现在剩下的就是 CSS 工作了。步骤如下：

• 将包装器向左浮动，并为其设置 100% 的宽度，使其占据整个视口宽度
• 将ul 和li 都浮动到左侧，不要给它们任何宽度以使其适应内容。
• 给ul 一个position: relative 或left: 50%。这将使它的左边缘移动到其父级的中心，这意味着视口的中心。
• 最后你应该给你的li 一个position: relative 或left: -50%。这将使它们移过父ul 的左边缘，并使li 列表的中心与父ul 的左边缘对齐。由于我们在上一步中将该边缘设置为视口的中心，因此菜单现在有效地居中。

正如我之前所说，感谢 Matthew James Taylor，请务必查看 his thorough explanation。他制作的图纸更容易理解。

编辑
根据要求，我设置了一个小小提琴来演示该技术： http://jsfiddle.net/fDmCQ/

Answer 3

将<ul> 的边距更改为0 auto 并为其指定宽度（~575px 或更大）。

jsFiddle example

 ul {
     font-family: Arial, Verdana;
     font-size: 14px;
     margin: 0 auto;
     padding: 0;
     width:600px;
     list-style: none;
     text-align: center;
 }