1

I have a block-level element of unknown width. This element needs to be horizontally centered on the page, and its position needs to be relative so that its absolutely positioned child will show up in the right place. You can see it in action here.

As far as I know, the best way to center an element of unknown width is to set its display to table. Semantically, this seems incorrect, because my element has nothing in common with a real table. Even worse, Firefox doesn't apply position to tables, so the absolutely positioned child shows up in the wrong spot:

enter image description here

Are there any workarounds for this that:

  • don't add any extra elements to the html
  • don't calculate and set the element's width with JavaScript

I'd like a pure CSS fix, and I'm running out of ideas...

kapa
  • 77,694
  • 21
  • 158
  • 175
Michael Martin-Smucker
  • 11,927
  • 7
  • 31
  • 36
  • Semantically, setting display properties to `table` is fine. You're not changing the element itself, only its appearance. But I take your point about Firefox, and it has me stumped... for now. How is the width of the div determined? – Kalessin Jun 24 '11 at 17:01
  • @Kalessin: The width of the div is automatically set to the width of the content of its children when you use `display: table` (as it would be with a normal html table). However, `display: table` elements generally have `display: table-row` and `display: table-cell` children, which is why I was worried that `display: table` wasn't very fitting in my case. – Michael Martin-Smucker Jun 24 '11 at 17:31
  • Yes, you would have required extra HTML elements to get that to work. – Kalessin Jun 24 '11 at 17:36

2 Answers2

4

Adding display: inline-block; to the element (#box) should suffice. This will cause it to become an inline element and still keep its "boxy" properties. Its width will automatically take up the width of its children.

Then you can set its alignment by setting text-align: center; on its parent.

IE7 does not support this display value (only on naturally inline elements), but the situation is the same with table (no support at all). You can use a hack though to make inline-block work in IE7.

jsFiddle Demo

Community
  • 1
  • 1
kapa
  • 77,694
  • 21
  • 158
  • 175
  • This is a nice solution but the catch here is that is requires height of the box to be defined. – Aziz Shaikh Jun 24 '11 at 17:06
  • @Aziz The height *is* defined, it's the width that's variable. – Kalessin Jun 24 '11 at 17:13
  • @Aziz In his example, he used a fixed height. – kapa Jun 24 '11 at 17:14
  • Yes, thats what I was trying to point at. Either height or width has to be defined in this solution. But overall good solution. – Aziz Shaikh Jun 24 '11 at 17:17
  • @bazmegakapa, thanks, that works! I had been under the mistaken impression that `inline-block` elements shouldn't contain block-level elements, but this doesn't seem to be the case. Don't worry, I never had any intention of supporting IE 6/7. The ultimate goal is a small JavaScript game that I'm writing for fun -- if it works in any version of IE, we'll call it a miracle. – Michael Martin-Smucker Jun 24 '11 at 17:21
  • 1
    @Aziz, why would height or width have to be set with this solution? This seems to work as expected, even without height/width: http://jsfiddle.net/mlms13/vhUGL/7/ – Michael Martin-Smucker Jun 24 '11 at 17:26
  • @Michael, sorry my bad. I overlooked bottom: 16px for the child div. Thanks for the fiddle to show that the solution works even without width/height. – Aziz Shaikh Jun 25 '11 at 07:41
  • FYI, if you want `display: inline-block` to work in IE7, see this: http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html – Chris Peters Jan 09 '13 at 11:44
1

If worst comes to worst, you could try text-align: -moz-center; which is a Firefox-specific method of centering block elements like inline-elements.

timw4mail
  • 1,716
  • 2
  • 13
  • 16