Question

I’m trying to create an unordered list of fixed width, fixed height items that are horizontally centered. If there is only 1 item, it will sit in the middle. It will grow outwards from the middle as more items are added. When the container width is reached, it will wrap to the next line as shown in the image.

Is it possible to achieve this and make it work in ie7, ie8 and all other major browsers? Any help would be most appreciated.

Many thanks.

Answer 1

You can use the CSS3 property inline-block that works enough fine on IE7 and other browsers.

The inline-block element have the properties of the inline item but can have a width or / and a height fixed.

If li is display: inline-block and ul is text-align: center I think that works.

🙂