Multi-row horizontally-centered list of floating elements

Question

I have a dynamically created menu that resides in a resizable container. There are 4 requirements that I must fulfill:

• Elements should be formed in the horizontal center.
• They should insert the number of rows in n and remain aligned.
• This should be a <ul></ul> list.
• It should work with IE7 +

Example:

 > Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6 | Item 7 < 

Now that the container is compressed, itmes should form the following:

  > Item 1 | Item 2 | Item 3 | Item 4 < > | Item 5 | Item 6 | Item 7 < 

The signs < and > represent the boundaries of the container.

How do I do this in HTML / CSS? Thanks in advance.

EDIT

I forgot to mention that I need to use <ul> and make it work under IE7 +.

Answer 1

HTML:

 <ul id="container"> <li class="item">Item1</li> <li class="item">Item2</li> <li class="item">Item3</li> <li class="item">Item4</li> <li class="item">Item5</li> <li class="item">Item6</li> <li class="item">Item7</li> </ul> 

CSS

 #container { text-align: center; padding: 10px; } .item { display: inline-block; margin: 0 8px; /* for ie7 */ zoom: 1; *display: inline; } 

Fiddle: http://jsfiddle.net/eqpGv/2/

Answer 2

@Aleksandr

Just set the width of the div to the maximum preferred size, apply the "text-align" style to the div class and set it to "center", since your div view will be vertically moved, the elements will wrap around and align the center.