Home/ Questions/Q 6066351
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T09:29:29+00:00

I have a block-level element of unknown width. This element needs to be horizontally

  • 0

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0