Can I center a with left-aligned s?

Question

I\'d like to center a list of left-aligned items.

This is what I currently have:

Answer 1

You can probably adopt my previous answer. Inline-block for IE, display:table for modern browsers. Might need to explicitly specify a list-style-type.

Edit: Since this is a list, may be able to get away with inline-block on the ul and not display:table. You need to declare in a separate rule, display:inline; after inline-block for IE.

Answer 2

Try this. It involves in incompatibilities, but I don't really know how older browsers handle margins and padding and all that anymore since I only work with new ones. It only involves some minor changes to your CSS.

/* I didn't style the other parts, so I'm taking them out to save space. */

#content {
    margin: 0 auto;
}

#content ul {
    border-top: solid 1px #666666;
    border-bottom: solid 1px #666666;
    text-align: left;
    font-size: 150%;
    list-style-type: none;
    margin: 20px auto;
    padding: 0px;
    width: 202px;
}

#content li {
    border-left: solid 1px #666666;
    border-right: solid 1px #666666;
    margin: 0 auto;
    padding: 0;
    width: 200px;
}

Edit: I want to clarify what I changed. I changed how content is aligned, but honestly, you can change that back, I don't think it has an effect.

What I originally did was set a fixed width and centered your li element, which you had no styling for. That just centered the content. The border you placed was on the ul so it was very wide, but if we placed it in the li then we would have many boxes. So, I split the border style. The reason why #content ul has a 202px width is because borders count on the outside of the width.

I hope the explanation made it clear to why it worked. Good luck! I tested this out in Google Chrome.

Answer 3

I'd look at using CSS and putting a margin: 0 auto on the <ul> with a maximum width container.

Answer 4

Set the <ul> to use display: inline-block;. See http://jsbin.com/atizi4.

Note that inline-block is not supported (completely) for IE ≤7.