Html 如何水平居中未知宽度的无序列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1695175/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to horizontally center an unordered list of unknown width?
提问by philfreo
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; }。或者，如果我知道<ul>我可以说的宽度#footer ul { width: 400px; margin: 0 auto; }。
But how do you center the unordered list items without setting a fixed width on the <ul>?
但是如何在不设置固定宽度的情况下将无序列表项居中<ul>？
EDIT: clarification - the list items should be next to each other, not below.
编辑：澄清 - 列表项应该彼此相邻，而不是在下面。
回答by philfreo
The solution, if your list items can be display: inlineis quite easy:
解决方案，如果您的列表项可以display: inline很简单：
#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }
However, many times you must use display:blockon your <li>s. The following CSS will work, in this case:
但是，很多时候你必须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%; }
回答by Yuvaraj
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:leftin li. it will make your li to align left.
注意：不要float:left在 li 中使用。它会让你的 li 向左对齐。
回答by Andrey
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 在缩放文本的情况下不会跳到下一行。
回答by cletus
It depends on if you mean the list items are below the previous or to the right of the previous, ie:
这取决于您的意思是列表项是在前一个下方还是在前一个的右侧，即：
Home
About
Contact
or
或者
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; }
回答by Martin Dale Lyness
Try wrapping the list in a div and give that div the inline property instead of your list.
尝试将列表包装在一个 div 中，并为该 div 提供 inline 属性而不是您的列表。
回答by Hymany Nguyen
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; }
