I want to make a Un-ordered list using single <ul> .... </ul>
How to align 2nd line in center?
I created JSFiddle here http://jsfiddle.net/jitendravyas/JWHQQ/ to test
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}
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;}
Make the li
's inline... You don't have to set the float:left
ul{ text-align:center;width:450px}
li{ display:inline;padding:15px}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With