2

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

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

3 回答 3

6

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

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

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

这是更新的演示。

参考

免责声明：对的支持inline-block有些有限不！它现在实际上已经很广泛了，请参阅caniuse.com 上的兼容性表。

于 2013-01-24T21:02:20.127 回答
4

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

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

编辑： 根据要求，我将简要描述该技术。您的 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将 the和 the都浮动li到左侧，不要给它们任何宽度以使它们适应其内容。
  • 给出的ula position: relative。left: 50%这将使它的左边缘移动到其父级的中心，这意味着视口的中心。
  • 最后你应该给你li的position: relative. left: -50%这将使它们越过父对象的左边缘，ul并使列表的中心与li父对象的左边缘对齐ul。由于我们在上一步中将该边缘设置为视口的中心，因此菜单现在有效地居中。

正如我之前所说，所有功劳归功于 Matthew James Taylor，并且一定要查看他的详尽解释。他制作的图纸使其更容易理解。

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

于 2013-01-24T21:44:15.747 回答
1

更改 to 的边距<ul>并0 auto给它一个宽度（~575px 或更大）。

jsFiddle 示例

 ul {
     font-family: Arial, Verdana;
     font-size: 14px;
     margin: 0 auto;
     padding: 0;
     width:600px;
     list-style: none;
     text-align: center;
 }
于 2013-01-24T20:52:50.120 回答