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.

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…

ie6
ie7

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;
}
ie6b
ie7b

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.

24 comments on this post

  1. Chris Georgakopoulos #1

    gz!

    1254231027
  2. Patternhead #2

    Nice tip and great explanation :)

    1255531027
  3. Mike #3

    Ah very nice, thank you.

    1255621027
  4. Sanjeev Sharma #4

    great trick… this will surely come handy. thanks for sharing!!

    1255741027
  5. Giorgos #5

    The LI elements are very useful (as i inspected)!

    1266981027
  6. 50 Coding Techniques For Layouts, Visual Effects and Forms (CSS/jQuery) - Smashing Magazine #6

    [...] 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 [...]

    1411451027
  7. 50 Coding Techniques For Layouts, Visual Effects and Forms (CSS/jQuery) - Smashing Magazine #7

    [...] 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 [...]

    1411461027
  8. 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Web Design Cool #8

    [...] 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. [...]

    1411481027
  9. jean philippe gousse » Blog Archive » 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) #9

    [...] 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. [...]

    1411561027
  10. 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates #10

    [...] 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. [...]

    1412101027
  11. 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « Free Templates and theme #11

    [...] 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. [...]

    1412201027
  12. 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Tutorial51 #12

    [...] 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. [...]

    1412221027
  13. 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « eggtea.com #13

    [...] 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. [...]

    1412281027
  14. 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | BestWebMagazine #14

    [...] 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. [...]

    1413821027
  15. 185+ Very Useful and Categorized CSS Tools, Tutorials, Cheat Sheets | tripwire magazine #15

    [...] Quick Tip: Centered Fake Floats [...]

    1414411027
  16. 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « WebGlide - UX #16

    [...] 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 [...]

    1419371027
  17. 185+ Very Useful and Categorized CSS Tools, Tutorials, Cheat Sheets « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates #17

    [...] Quick Tip: Centered Fake Floats [...]

    1428631027
  18. 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) | Top Web Hosts Review Best Web Hosting 2010 #18

    [...] 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. [...]

    1431641027
  19. 彼岸(Into the wild) » Blog Archive » 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) #19

    [...] 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. [...]

    1459171027
  20. 22 CSS Layout Tutorials and Tricks #20

    [...] Quick Tip: Centered Fake Floats Cool way to center items without using floats! [...]

    1475181027
  21. 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) #21

    [...] Quick Tip: Centered Fake Floats23 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. [...]

    1519671027
  22. Gonzalo #22

    Beau-ti-full

    thx :)

    1866661027
  23. asrar #23

    y not use only display:inline in li.. which works fine in all browsers

    1915301027
  24. Sugar #24

    @asrar

    Hey, thanks for your comment. Why use display:inline though, when you can use display:inline-block in most modern browsers to get the effect you want?

    Inline-block is such an under-used CSS trick, I’m quite surprised.

    1917761027

leave your comment

sugarenia.com is wearing the Wordpress badge

↑ Back to top  |  Grab the feed