インラインブロック要素を中央に配置することは可能ですか？

Question

私は最初に未知の幅の要素、具体的にはユーザーによって提供されたMathJaxの式を持っています。要素の幅がその内容に適合し、定義された幅を持つように、要素をインラインブロックとして設定しました。しかしながら、これは従来のセンタリングの方法を妨げる。

.equationElement 
{ 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
} 

、溶液をすることはできません：それは次のように動作しない、ある

.equationElement 
{ 
    display: block; 
    width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
} 

私は、ユーザーが式をクリックすると幅が実際に事前に可能とすべきか見当がつかないので、私は方程式を強調表示する必要があるので、幅を0に設定することはできません。誰もこの方程式を中心にする解決策を持っていますか？

Answer 1

単に容器にtext-align: center;を設定してください。

Here's a demo。

Answer 2

これを行うための別の方法（また、ブロック要素のために働く）：

.center-horizontal { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

説明： 左：50％が親を含むの中心からを開始する要素を配置しますので、あなたは、したいです位置の親を含むの位置を設定してください ：移動X（-50％）

注1：その幅の変換の半分で背中それを引く相対。親が絶対的に配置されている場合は、その内部に0パディングとマージンのdivを100％の幅と高さを入れて、それを位置を与える：相対

注2：また

top:50%; 
transform: translateY(-50%); 

Answer 3

少しと中心垂直に応じて変更できます後半、しかしIVEKの回答に似て、あなたはそう、というよりも、leftmargin-leftを使用してposition宣言の使用を避けることができます：ところで

margin-left: 50%; transform: translateX(-50%);