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

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.