Question

I like to think I know a lot about CSS, and know how to center things.

Alas, every once in a while, I always fail to center something. I’m probably doing something stupid, and those are the times when I ask stackoverflow.

http://jsfiddle.net/Svwh3/

margin: auto; with widths doesn’t center.

I can’t use text-align, because there’ll be text elements in it. Putting text-align: left; on them wouldn’t be good for internationalization, right? Why isn’t there a text-align: root;…

So what’s a proper solution?

Answer 1

Keep margin: 0 auto 0.55em; on figure > * and add display:block;

I don’t think margin: 0 auto works unless it’s applied to block elements.