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:
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.
20 comments on this post
Chris Georgakopoulos #1
11.May.09
gz!
Patternhead #2
11.May.09
Nice tip and great explanation
Mike #3
11.May.09
Ah very nice, thank you.
Sanjeev Sharma #4
11.May.09
great trick… this will surely come handy. thanks for sharing!!
Giorgos #5
11.May.09
The LI elements are very useful (as i inspected)!
50 Coding Techniques For Layouts, Visual Effects and Forms (CSS/jQuery) - Smashing Magazine #611.May.09
[...] to match the heights of boxes in the same container and create a tidy grid, with little overhead.Quick Tip: Centered Fake FloatsThere were ways to center-align left-floated elements, but then inline-block became popular and [...]
50 Coding Techniques For Layouts, Visual Effects and Forms (CSS/jQuery) - Smashing Magazine #711.May.09
[...] to match the heights of boxes in the same container and create a tidy grid, with little overhead.Quick Tip: Centered Fake FloatsThere were ways to center-align left-floated elements, but then inline-block became popular and [...]
50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Web Design Cool #811.May.09
[...] Quick Tip: Centered Fake FloatsThere were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats. [...]
jean philippe gousse » Blog Archive » 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) #911.May.09
[...] Quick Tip: Centered Fake FloatsThere were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats. [...]
50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates #1011.May.09
[...] Quick Tip: Centered Fake Floats There were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats. [...]
50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « Free Templates and theme #1111.May.09
[...] Quick Tip: Centered Fake Floats There were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats. [...]
50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Tutorial51 #1211.May.09
[...] Quick Tip: Centered Fake FloatsThere were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats. [...]
50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « eggtea.com #1311.May.09
[...] Quick Tip: Centered Fake FloatsThere were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats. [...]
50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | BestWebMagazine #1411.May.09
[...] Quick Tip: Centered Fake Floats There were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats. [...]
185+ Very Useful and Categorized CSS Tools, Tutorials, Cheat Sheets | tripwire magazine #1511.May.09
[...] Quick Tip: Centered Fake Floats [...]
50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « WebGlide - UX #1611.May.09
[...] to match the heights of boxes in the same container and create a tidy grid, with little overhead.Quick Tip: Centered Fake FloatsThere were ways to center-align left-floated elements, but then inline-block became popular and [...]
185+ Very Useful and Categorized CSS Tools, Tutorials, Cheat Sheets « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates #1711.May.09
[...] Quick Tip: Centered Fake Floats [...]
50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Top Web Hosts Review Best Web Hosting 2010 #1811.May.09
[...] Quick Tip: Centered Fake Floats There were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats. [...]
彼岸(Into the wild) » Blog Archive » 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) #1911.May.09
[...] Quick Tip: Centered Fake Floats There were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats. [...]
22 CSS Layout Tutorials and Tricks #2011.May.09
[...] Quick Tip: Centered Fake Floats Cool way to center items without using floats! [...]