70

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

<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>？

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

4

6 回答 6

165

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

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

但是，很多时候你必须display:block在你<li>的 s. 在这种情况下，以下 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%; }
于 2009-11-08T02:42:08.167 回答
34

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

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

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

于 2012-11-20T05:37:13.510 回答
12

另一种解决方案：

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

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

于 2013-02-14T16:48:48.360 回答
8

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

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; }
于 2009-11-08T02:59:45.607 回答
2

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

于 2009-11-08T02:44:18.820 回答
0

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

#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; }
于 2013-05-14T04:47:28.410 回答