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

【问题标题】：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> 设置固定宽度的情况下将无序列表项居中？

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

【问题讨论】：

标签： html css centering

【解决方案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 给出的答案的评论。