在Firefox中居中一个相对定位的元素,其宽度未知

Question

我有一个未知宽度的块级元素.此元素需要在页面上水平居中,并且position需要relative使其绝对定位的子元素显示在正确的位置.你可以在这里看到它.

据我所知,将未知宽度的元素居中的最佳方法是将其设置display为table.在语义上,这似乎是不正确的,因为我的元素与真实表没有任何共同之处.更糟糕的是,Firefox不会将位置应用于表格,因此绝对定位的子项显示在错误的位置:

是否有任何解决方法:

• 不要在html中添加任何额外的元素
• 不要使用JavaScript计算和设置元素的宽度

我想要一个纯粹的CSS修复,而且我的想法已经不多了......

Answer 1

添加display: inline-block;到element(#box)就足够了.这将使它成为内联元素,并仍然保持其"四四方方"属性.它的宽度会自动占据其子节点的宽度.

然后,您可以通过设置text-align: center;其父级来设置其对齐方式.

IE7不支持此display值(仅适用于自然内联元素),但情况与table(完全没有支持)相同.你可以使用hack来inline-block在IE7中工作.

jsFiddle演示