Html <li> 项目转到第二行时如何居中对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7006262/
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 center align <li> items when it goes to 2nd line?
提问by Jitendra Vyas
I want to make a Un-ordered list using single <ul> .... </ul>
我想使用 single 制作一个无序列表 <ul> .... </ul>
How to align 2nd line in center?
如何在中心对齐第二行？
I created JSFiddle here http://jsfiddle.net/jitendravyas/JWHQQ/to test
我在这里创建了 JSFiddle http://jsfiddle.net/jitendravyas/JWHQQ/来测试
回答by Alexey Ivanov
To align <ul>element in the center, set left and right margins to auto:
要<ul>在中心对齐元素，请将左右边距设置为auto：
ul{ text-align:center;width:450px;margin-left:auto;margin-right:auto}
li{ float:left;padding:15px}
To align both lines of <li>to center, use display: inlineas suggested by domanokz. But in this case <li>lose their margins and paddings. To keep them, set displayto inline-block:
要将 的两条线对齐<li>到中心，请display: inline按照domanokz 的建议使用。但在这种情况下，<li>它们的边距和填充会丢失。要保留它们，请设置display为inline-block：
ul{ text-align:center;width:450px;}
li{ display:inline-block;padding:15px;}
回答by dpp
Make the li's inline... You don't have to set the float:left
使li's 内联...您不必设置float:left
ul{ text-align:center;width:450px}
li{ display:inline;padding:15px}
回答by matdumsa
does this do the trick?
这能解决问题吗？
I made the li inline elements instead of making them float left.
我制作了 li 内联元素，而不是让它们向左浮动。
回答by tlaverdure
This seems to be the best solution.
这似乎是最好的解决方案。
ul{ text-align:center;width:450px magin:0 auto}<br>
li{ display:inline;padding:15px}
