web-dev-qa-db-ja.com

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

最初は未知の幅の要素、具体的にはユーザーが提供するMathJax方程式があります。要素の幅がコンテンツに適合し、定義された幅を持つように、要素をインラインブロックとして設定しています。ただし、これは従来のセンタリング方法を妨げます。つまり、次は機能しません。

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

そして、解決策は次のとおりではありません。

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

実際に幅を実際にどのようにすべきかわからないので、ユーザーが方程式をクリックすると、方程式全体を強調表示する必要があるため、幅を0に設定することはできません。

cssmathjax
56
Deets McGeets

単にtext-align: center;コンテナ上。

デモはこちら 。

112
phihag

これを行う別の方法（ブロック要素でも機能します）：

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

説明：左：50％は要素を配置します開始含まれる親の中心から、引き戻す変換でその幅の半分に：translateX（- 50％）

注1：必ず親を含む位置をposition：relativeに設定してください。親が絶対に配置されている場合は、100％の幅と高さ、0パディング、マージンdivをその中に入れて、位置を指定します：相対

注2：垂直方向のセンタリング用に変更することもできます

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

少し遅れますが、Ivekの答えと同様に、positionではなく_margin-left_を使用することで、left宣言の使用を避けることができます。

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

7
Amie Wilt