CODEWITHSUNDEEP
htmlcss
DSKrepps
DSKrepps

Reputation: 641

How to center in <figure> without text-align?

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?

Upvotes: 4

Views: 20699

Answers (2)

redcalx
redcalx

Reputation: 8637

I added this to your jsfiddle:

figure img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Upvotes: -1

punkrockbuddyholly
punkrockbuddyholly

Reputation: 9794

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.

Upvotes: 5

Related Questions