如何使<li>项目在第二行时居中对齐？

Question

我想使用单个<ul> .... </ul>标签创建无序列表。

如何将第二行居中对齐？

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

图片描述：enter image description here

- Jitendra Vyas

Answer 1

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

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

为了将 <li> 的两行对齐到中心，可以使用 display: inline，如 domanokz 建议。但在这种情况下，<li> 会失去它们的边距和填充。要保留它们，请将 display 设置为 inline-block：

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

- Alexey Ivanov

---

感谢指出边距和填充的问题。然而，我担心像这篇文章中所述，inline-block在IE5和IE6中无法正常工作：http://www.quirksmode.org/css/display.html - kazinix

@domanokz 是的，没错。但是没有其他方法可以保持边距，然而内联元素上的填充应该被保留，但是我在 Firefox 中进行的快速测试显示只有 padding-left 和 padding-right 应用于具有 display: inline 的 <li>。在这种情况下，<ul> 上的 line-height 属性可用于控制两行之间的距离。虽然我不确定它在 IE5 和 IE6 中是否正确工作。 - Alexey Ivanov

Answer 2

将 li 设置为行内元素... 不需要设置 float:left

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

- kazinix

---

但我也想使用 Float。 - Jitendra Vyas

我相信这是不可能的。float:left会使它们对齐到左边。你为什么要让它们浮动呢？ - kazinix

Answer 3

这可以达到效果吗？

http://jsfiddle.net/JWHQQ/5/

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

- matdumsa

Answer 4

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

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

- tlaverdure