如何水平居中未知宽度的无序列表？

Posted 2023-03-05

【中文标题】如何水平居中未知宽度的无序列表？

【英文标题】：How to horizontally center an unordered list of unknown width?

【发布时间】：2010-12-14 06:56:40

【问题描述】：

通常在页脚中有一组链接在列表中表示，例如：

<div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

我希望 div#footer 中的所有内容都水平居中。如果是一段，你会很容易地说：p text-align: center; 。或者如果我知道<ul> 的宽度，我可以说#footer ul width: 400px; margin: 0 auto; 。

但是如何在不为<ul> 设置固定宽度的情况下将无序列表项居中？

编辑：澄清 - 列表项应该彼此相邻，而不是在下面。

【参考方案1】：

解决方案，如果您的列表项可以是display: inline，则非常简单：

#footer  text-align: center; 
#footer ul  list-style: none; 
#footer ul li  display: inline; 

但是，很多时候您必须在您的<li>s 上使用display:block。在这种情况下，以下 CSS 将起作用：

#footer  width: 100%; overflow: hidden; 
#footer ul  list-style: none; position: relative; float: left; display: block; left: 50%; 
#footer ul li  position: relative; float: left; display: block; right: 50%; 

【讨论】：

这很棒。从来没有想过使用 display:inline 来解决这个问题。

在您的<li>s 上使用display: inline-block 怎么样？你可以用 text-align 使它们居中，如果你需要它们，它们仍然会像一个块一样。

【参考方案2】：

尝试将列表包装在一个 div 中，并为该 div 提供内联属性而不是您的列表。

【参考方案3】：

这取决于您的意思是列表项是在上一个下方还是在上一个右侧，即：

Home
About
Contact

或

Home | About | Contact

您可以简单地使用第一个：

#wrapper  width:600px; background: yellow; margin: 0 auto; 
#footer ul  text-align: center; list-style-type: none; 

第二个可以这样完成：

#wrapper  width:600px; background: yellow; margin: 0 auto; 
#footer ul  text-align: center; list-style-type: none; 
#footer li  display: inline; 
#footer a  padding: 2px 12px; background: orange; text-decoration: none; 
#footer a:hover  background: green; color: yellow; 

【参考方案4】：

使用下面的 css 来解决您的问题

#footer text-align:center; height:58px;
#footer ul   font-size:11px;
#footer ul li display:inline-block;

注意：不要在 li 中使用float:left。它会让你的 li 左对齐。

【参考方案5】：

另一种解决方案：

#footer  display:table; margin:0 auto; 
#footer li  display:table-cell; padding: 0px 10px; 

那么在缩放文本的情况下ul不会跳转到下一行。

【讨论】：

我发现这个是最好的。好主意！

我已经回到这里再次使用它，它再次起作用了！谢谢

这正是我想要的。谢谢！

【参考方案6】：

philfreo 的答案很棒，它完美运行（跨浏览器，使用 IE 7+）。只需将我的 exp 添加到 li 中的锚标记即可。

#footer ul li  display: inline; 
#footer ul li a  padding: 2px 4px;  /* no display: block here */

#footer ul li  position: relative; float: left; display: block; right: 50%; 
#footer ul li a display: block; left: 0;  

【讨论】：

这可能是对@philfreo 给出的答案的评论。