How to center an unordered list?

Question

I need to center an unordered list of unknown width, while still keeping the list-items left aligned.

Achieve the same result as this:

HTML<

Answer 1

Let's say the list is:

 
item1
 
item2
 
item3

For this example. If I understand correctly, you want the list items to be in the middle of the screen, but you want the text IN those list items to be centered to the left of the list item itself. Doing that is actually pretty easy. You just need some CSS:

ul {
    display: table; 
    margin: 0 auto;
    text-align: left;
}

And it works! Here is what is happening. First, we say we want to affect only unordered lists. Then, we do Rafael Herscovici's trick for centering the list items. Finally, we say to align the text to the left of the list items.