<li> 进入第二行时如何居中对齐？答案

【问题标题】：How to center align <li> items when it goes to 2nd line?<li> 进入第二行时如何居中对齐？
【发布时间】：2012-12-15 03:20:24
【问题描述】：

我想使用单个 <ul> .... </ul> 制作一个无序列表

如何将第二行居中对齐？

我在这里创建了 JSFiddle http://jsfiddle.net/jitendravyas/JWHQQ/ 进行测试

【问题讨论】：

标签： html css

【解决方案1】：

要将<ul>元素居中对齐，请将左右边距设置为auto：

ul{ text-align:center;width:450px;margin-left:auto;margin-right:auto}
li{ float:left;padding:15px}

要将<li> 的两行对齐到中心，请将display: inline 用作suggested by domanokz。但在这种情况下，<li> 会丢失它们的边距和填充。要保留它们，请将display 设置为inline-block：

ul{ text-align:center;width:450px;}
li{ display:inline-block;padding:15px;}

【讨论】：

感谢您指出丢失的边距和填充。但是，我担心 inline-block 在 IE5 和 IE6 中无法正常工作，如本文所述：quirksmode.org/css/display.html
@domanokz 是的，这是真的。但是没有其他方法可以保持边距，但是应该在内联元素上保留填充，但是我在 Firefox 中的快速测试表明只有padding-left 和padding-right 应用于<li> 和display: inline。在这种情况下，<ul> 上的 line-height 属性可用于控制两条线的接近程度。虽然我不确定它在 IE5 和 IE6 中是否正确。

【解决方案2】：

使li 内联...您不必设置float:left

ul{ text-align:center;width:450px}
li{ display:inline;padding:15px}

【讨论】：

【解决方案3】：

这样做有效果吗？

我让 li 内联元素而不是让它们向左浮动。

【讨论】：

【解决方案4】：

这似乎是最好的解决方案。

ul{ text-align:center;width:450px magin:0 auto}<br>
li{ display:inline;padding:15px}

【讨论】：