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

Answer 1

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/