Firefoxで未知の幅を持つ相対的に配置された要素を中心にします

Question

私は未知の幅のブロックレベル要素を持っています。この要素はページ上で水平に中央に配置する必要があり、positionはrelativeである必要があり、絶対配置された子が正しい場所に表示されます。あなたはsee it in action hereです。

私が知る限り、未知の幅の要素を中心にする最も良い方法は、displayをtableに設定することです。意味的には、これは間違っていると思われます。なぜなら、私の要素には実際の表とは何の共通点もないからです。絶対位置の子供が間違った場所に表示させ、Firefox doesn't apply position to tables、さらに悪い：

は、このことの回避策があります

• は、HTMLに余分な要素を追加しないでください
• ではJavaScript

を持つ要素の幅を計算し、設定していない私は、純粋なCSSの修正を希望、と私は思いアイデアが不足している...

Answer 1

要素（#box）にdisplay: inline-block;を追加するだけで十分です。これは、それがインライン要素になり、それでも "boxy"プロパティを保持します。その幅は自動的に子の幅を占めます。

次に、その親にtext-align: center;を設定することで、配置を設定できます。

IE7はこの値をサポートしていません（自然なインライン要素のみ）。table（全くサポートされていません）と同じです。 You can use a hack though to make inline-block work in IE7.

jsFiddle Demo

Answer 2

最悪の場合は、インライン要素のようなブロック要素を中心とするFirefoxの固有の方法であるtext-align: -moz-center;を試みることができます。