This post has come from a quick bit of experimentation, trying to centre align list items.

The design called for centerally aligned list item links, and there could be 3, 4, 5 or more links. Initially I was stumped as to how to create this effect. I had considered a left margin to create the illusion of centre aligning for each possible number, but I knew there was a better way. I’m always aiming for a solution that works in the older browsers too, and this includes IE6. I don’t know why I do it to myself, especially as it apparently only has less than a 5% market share nowadays.

The Example

I’ll cut to the chase; here is the HTML and CSS.

http://prandall.com/experimental/centre-ul/

So How Does It Work?

On the UL, I am centre aligning the text, effectively making all the content aligning this way. That’s the real key to it, second only to display:inline on the LI, because a float will push everything to the left.

Below is all the CSS you need


ul{text-align:center;}
li{display:inline;}


Simples!