How can I make a centered, left-aligned, variable-width bullet list with CSS?

Question

Is it possible somehow to center a left-aligned list? Like, I want the list itself centered, but want the bullet points to line up below each other.

I know I could sort of do this if I give the list a fixed width and margin auto, but I really don't want to set a width on it since I don't know how wide the content will be.

Answer 1

Use display: inline-block on the ul, and text-align: center on a parent element.

See: http://jsfiddle.net/thirtydot/E3Yjr/

CSS:

.list-container {
    text-align: center;
}
ul {
    display: inline-block;
    text-align: left;
}

HTML:

<div class="list-container">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item Looooooooooooooooooooooooonggg</li>
    </ul>
</div>

If you need it to work in IE7, here's how: http://jsfiddle.net/thirtydot/E3Yjr/1/

display: inline-block;
*display: inline;
zoom: 1;