sugarenia.com

Up till (relatively) recently, I had a major gripe with HTML & CSS. I couldn’t find a proper, efficient, semantic way to center align left floated elements.
Gee, what a mouthful, even writing about it gets me edgy.

Of course there were ways, but I couldn’t sympathise with any of them. I, for example, always stumbled upon this problem while styling pagination links for galleries and image carousels.

Then came the day when display: inline-block became famous and, as by magic, everything changed. After a bit of tinkering, I found an efficient and (mostly) cross-browser way to center elements, without resolving to floats.

You can follow the technique below or skip directly to the witty, quick & dirty demo I’ve come up with. Go on, I dare you.

T3h HTML

So what do we have here? Nothing too fancy, just a simple unordered list:

‹ Previous
1
2
3
4
5
Next ›

T3h CSS, take #1

So we want this list centered, with each element neatly next to its previous. OK, let’s get down to business:

ul	{
	margin: 20px;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

li	{
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

li a	{
	text-decoration: none;
	color: #555;
	padding: 4px 6px;
	border: 1px solid #ccc;
	margin: 0 4px;
}

li a:hover	{
	border: 1px solid #999;
	color: #333;
	background-color: #f2f2f2;
}

Wee! Looks cool. Now the tricky part: let’s start the browser testing…

(5 minutes later)

Phew! Firefox, Safari, Opera and Internet Explorer 8 seem to be working fine with it!

And Internet Explorer 6 and 7… Well…

Let’s say they don’t love inline-block to bits.

T3h CSS, take #2

Hmmm… How about turning display: inline-block to display: inline? Internet Explorer loves display: inline! And maybe a little of this trusty ole jar of hasLayout cream we always have available on our web-des shelf. Let’s add a zoom: 1 declaration to li as and see what happens (I used the star and the star-plus hack to target IE6 and IE7 only, but in real life designs, you really should use conditional stylesheets):

* html li	{ display: inline; }
*+html li	{ display: inline; }

li a	{
	text-decoration: none;
	color: #555;
	padding: 4px 6px;
	border: 1px solid #ccc;
	margin: 0 4px;
	zoom: 1;
}

Tada! Mission accomplished. Pat yourself at the back and go get a cup of tea, you’ve deserved it.

Disclaimer: I don’t claim this will work in older versions of proper browsers (namely, Firefox 2 or Safari 2 or yada yada). Frankly, I don’t care, and neither should you. It works fine for the occasion here and there when you want to center stuff. If you have a better / cleaner solution, I’d be glad to hear all about it in the comments.