如何水平居中一个宽度不确定的无序列表？

Question

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

<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> 设置固定宽度的情况下居中无序列表项？

编辑：澄清-列表项应该并排显示，而不是以下显示。

- philfreo

Answer 1

如果您的列表项可以设置为display:inline，那么解决方案非常简单：

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

然而，在很多情况下，你必须在你的 <li> 元素上使用 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%; }

- philfreo

---

太棒了。从未想过使用display:inline来解决这个问题。 - Brett DeWoody

你可以在你的<li>上使用 display: inline-block，这样它们就可以通过文本对齐方式居中，并且如果需要的话，它们仍然会表现为块级元素。 - ithil

Answer 2

使用下面的CSS解决您的问题

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

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

- Yuvaraj

Answer 3

另一种解决方案：

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

如果文字放大时，ul标签不会跳到下一行。

- Andrey

---

我发现这个是最好的。很棒的想法！ - Kenton de Jong

我又回来使用它了，而且再次运行正常！谢谢。 - Scott Dallas

这正是我正在寻找的。谢谢！ - Canser Yanbakan

Answer 4

这取决于您是指列表项在前一个下方还是在前一个右侧，即：

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; }

- cletus

Answer 5

尝试将列表包装在一个div中，并将该div的inline属性设置为inline，而不是使用列表本身。

- Martin Dale Lyness

Answer 6

philfreo的答案很棒，它完美地工作（跨浏览器，包括IE 7+）。只需为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; } 

- Jacky Nguyen

---

这本来可以是对@philfreo回答的评论。 - Michael Reneer