Quick Tip: Centered Fake Floats
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.
So what do we have here? Nothing too fancy, just a simple unordered list:
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:
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):
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.