如何居中对齐< li>项目,当它去第二行? [英] How to center align <li> items when it goes to 2nd line?
本文介绍了如何居中对齐< li>项目,当它去第二行?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用单个< 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屋!
查看全文