Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center align <li> items when it goes to 2nd line?

Tags:

html

css

I want to make a Un-ordered list using single <ul> .... </ul>

How to align 2nd line in center?

enter image description here

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

like image 559
Jitendra Vyas Avatar asked Aug 10 '11 05:08

Jitendra Vyas


2 Answers

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;}
like image 189
Alexey Ivanov Avatar answered Oct 21 '22 06:10

Alexey Ivanov


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}
like image 30
dpp Avatar answered Oct 21 '22 04:10

dpp