How to centralize list items inside an UL element?

Question

How can I centralize list items inside ul without using extra divs or elements. I have the following. I thought text-align:center would do the trick. I don't seem to understand.

 <style> ul { width:100%; background:red; height:20px; text-align:center; } li { display:block; float:left; background:blue; color:white; margin-right:10px; } </style> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> 

Check jsfiddle http://jsfiddle.net/3Ezx2/1/

Answer 1

write display:inline-block instead of float:left .

 li { display:inline-block; *display:inline; /*IE7*/ *zoom:1; /*IE7*/ background:blue; color:white; margin-right:10px; } 

http://jsfiddle.net/3Ezx2/3/

Answer 2

 li{ display:table; margin:0px auto 0px auto; } 

That should work.

Answer 3

It looks like all you need is text-align: center; in ul

Answer 4

A more modern way is to use flexbox:

 ul{ list-style-type:none; display:flex; justify-content: center; } ul li{ display: list-item; background: black; padding: 5px 10px; color:white; margin: 0 3px; } div{ background: wheat; } 

 <div> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> 

Answer 5

I ran into this problem before and found that sometimes it is a problem.

By removing the padding from ul, any li set for the built-in block will be well centered:

 * { box-sizing: border-box; } ul { width: 120px; margin: auto; text-align: center; border: 1px solid black; } li { display: inline-block; } ul.no_pad { padding: 0; } p { margin: auto; text-align: center; } .break { margin: 50px 10px; } 

 <div> <p>With Padding (Default Style)</p> <ul class="with_pad"> <li>x</li> <li>x</li> <li>x</li> <li>x</li> </ul> <div class="break"></div> <p>No Padding (Padding: 0)</p> <ul class="no_pad"> <li>x</li> <li>x</li> <li>x</li> <li>x</li> </ul> <div> 

Hope this helps anyone who works on the same issue :)

Greetings

Jake

Answer 6

I added a div line and it did the trick:

 <div style="text-align:center"> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </div> 

Answer 7

Neither text-align:center nor display:inline-block worked for me on their own, but a combination of both:

 ul { text-align: center; } li { display: inline-block; } 

Answer 8

I had a problem, more subtle for you, I am fast and this is the best solution that I have found so far.

What result looks like

Shows what the code output looks like. Borders simply show an interval and are not needed.

---

Html:

  <div class="center"> <ul class="dots"> <span> <li></li> <li></li> <li></li> </span> </ul> </div> 

CSS

  ul {list-style-type: none;} ul li{ display: inline-block; padding: 2px; border: 2px solid black; border-radius: 5px;} .center{ width: 100%; border: 3px solid black;} .dots{ padding: 0px; border: 5px solid red; text-align: center;} span{ width: 100%; border: 5px solid blue;} 

---

Not everything here is necessary to center the list items.

You can cut css before this to get the same effect:

  ul {list-style-type: none;} ul li{display: inline-block;} .center{width: 100%;} .dots{ text-align: center; padding: 0px;} span{width: 100%;} 

---

Answer 9

Another way to do this:

 <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> ul { width: auto; display: table; margin-left: auto; margin-right: auto; } ul li { float: left; list-style: none; margin-right: 1rem; } 

http://jsfiddle.net/f6qgf24m/