如何将未知宽度的无序列表居中?

It is common to have a set of links in a footer represented in a list, such as:

在列表的页脚中有一组链接是很常见的，例如:

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

I want everything inside div#footer to be centered horizontally. If it was a paragraph, you would just easily say: p { text-align: center; }. Or if I knew the width of the <ul> I could just say #footer ul { width: 400px; margin: 0 auto; }.

我希望div#footer中的所有东西都水平居中。如果是一段话，你可以很容易地说:p {text-align: center;}。或者如果我知道

But how do you center the unordered list items without setting a fixed width on the <ul>?

但是如何在不设置

EDIT: clarification - the list items should be next to each other, not below.

编辑:澄清——列表项应该放在一起，而不是在下面。

6 个解决方案

#1

162

The solution, if your list items can be display: inline is quite easy:

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

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

However, many times you must use display:block on your <li>s. The following CSS will work, in this case:

但是，很多时候您必须在

上使用display:block。在这种情况下，下面的CSS将会工作:

上使用显示:块。在这种情况下,下面的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%; }

#2

Use the below css to solve your issue

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

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

Note: Don't use float:left in li. it will make your li to align left.

注意:不要使用float:left in li。它会使你的李向左对齐。

#3

One more solution:

一个解决方案:

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

Then ul doesn't jump to the next line in case of zooming text.

然后，ul不会跳转到下一行，以防缩放文本。

#4

It depends on if you mean the list items are below the previous or to the right of the previous, ie:

这取决于你是指列表项在前一项之下还是在前一项的右边，即:

Home
About
Contact

或

Home | About | Contact

The first one you can do simply with:

第一个简单的方法是:

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

The second could be done like this:

第二种方法可以这样做:

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

#5

Try wrapping the list in a div and give that div the inline property instead of your list.

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

#6

The answer of philfreo is great, it works perfectly (cross-browser, with IE 7+). Just add my exp for the anchor tag inside li.

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

#1

162