ansaurus

Question

Can I center a <ul> with left-aligned <li>s?

Answer 1

A:

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

DavidYell 2010-07-28 16:31:01

If you do this, I think that if your ul is only 100px for example, but your maximum width container is 200px, the li's will not look centered in the page, but rather left aligned inside the 200px width ul. see what i'm talking about here http://jsbin.com/ubege

Catfish 2010-07-28 16:41:22

Both of those are already done in the example provided in the question. `#content ul` has `margin: 20px auto` and its container div `#content` has is maximum width by default.

T Pops 2010-07-28 16:45:38

Ah sorry, my bad :)

DavidYell 2010-07-29 09:02:38

Answer 2

+1 A:

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

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

KennyTM 2010-07-28 16:36:40

`display: inline-block` works **perfectly** here. Unfortunately, most of my users are using either IE6 or 7. Otherwise, great answer.

T Pops 2010-07-28 16:48:23

Then you'll be happy to know that IE supports inline-block if you add hasLayout to an element, and then set it to display: inline after. Here's the hack: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Magnar 2010-07-28 17:12:19

T Pops 2010-07-28 19:59:03

Answer 3

A:

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.

meder 2010-07-28 16:42:58

Answer 4

A:

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.

Tarik 2010-07-28 17:05:01

I read your question wrong, I am working on a new solution.

Tarik 2010-07-28 17:12:24

ansaurus

tags:

views:

answers:

Can I center a <ul> with left-aligned <li>s?

Solution

related questions