Horizontal Centering of Multi-Line List Items in Unordered List

Question

I have an unordered list that wraps onto a second line, and needs to be centered horizontally within the containing UL. Each LI is a set width and height. I've seen many approaches that work for a single line, but nothing I've tried is working when the list wraps to a second line. Would be ideal if this worked in IE7+ -- Thanks for the help.

See here for an illustration:

http://grab.by/8UIl

Solution

Here is the best method I could find.

ul li { 
    /* make list elements fall inline as block elements */
    position: relative;
    display: inline-block;
    /* next two lines only for display purposes */
    text-align: center;
    border:1px solid red;
}
/* horizontally center ul element */
ul { text-align:center; }

See the link for an example: http://jsfiddle.net/gfkPG/

Comments

[John]

OMG LOL -- Such a simple solution -- so used to having to employ complicated work-arounds, I forgot to look at the obvious. Thanks much!

[John]

Sorry, jumped the gun there, that doesn't work in IE7 for some reason.

[John]

There's always got to be a hack for IE :) Here's what I found: zoom:1;*display:inline; in a conditional CSS did the trick. Thanks again.