如何居中对齐< li>项目，当它去第二行？ [英] How to center align <li> items when it goes to 2nd line?

问题描述

我想使用单个< ul> ....< / ul>

如何在中心排列第二行？

How to align 2nd line in center?

I在此创建JSFiddle http://jsfiddle.net/jitendravyas/JWHQQ/ 测试

I created JSFiddle here http://jsfiddle.net/jitendravyas/JWHQQ/ to test

推荐答案

要在中心对齐< ul> 元素，请设置左右边距到 auto ：

To align <ul> element in the center, set left and right margins to auto:

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

要将< li> 的两行对齐到中心，请使用 display：inline 由domanokz建议。但在这种情况下，< li> 会丢失其边距和padding。要保留它们，请将显示为 inline-block ：

To align both lines of <li> to center, use display: inline as suggested by domanokz. But in this case <li> lose their margins and paddings. To keep them, set display to inline-block:

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

这篇关于如何居中对齐< li>项目，当它去第二行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！