Question

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

<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

有一种非常简洁，完全跨浏览且充满活力的诀窍＆＃39;要实现这一点，只要菜单停留在一行。这里有很好的解释：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;
 }

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

3 个答案:

参考