0

I want to get a result like this: http://jsfiddle.net/7Kc2m/, but I don't want to use text-align for obvious reasons. I was trying to leave just margin: 0 auto, but it mysteriously doesn't work. So, how can I achieve this without text-align and center? And if you can, please let me know the reasons why it doesn't work with margin: 0 auto and why it works with yours, thank you.

When I tried with float: left, it didn't work too.

good_evening
  • 21,085
  • 65
  • 193
  • 298

1 Answers1

3

Make sure you specify a width on your margin:0 auto element.

It works in the fiddle because its an inline-block element, in conjuction with the text-align, but a block level element will span the entire width of the page if a width isnt specified, making the margin trick invalid.

anson
  • 4,156
  • 2
  • 22
  • 30
  • What if I don't know the width? – good_evening Sep 19 '12 at 00:34
  • And by specify a width I dont mean 100%, I mean a hard pixel width which is as little as possible needed will span the contents of what you want to be centered. – anson Sep 19 '12 at 00:34
  • Well, you can either choose a hard width, then resize the image or content inside to fit it, OR, you can look at centering elements when their floated by using this method: http://stackoverflow.com/questions/1232096/how-to-horizonatally-center-a-floating-element-of-a-variable-width – anson Sep 19 '12 at 00:39