72

最初は幅が不明な要素、具体的にはユーザーが指定したMathJax方程式があります。要素の幅がその内容に適合し、定義された幅を持つように、要素をインラインブロックとして設定しています。ただし、これにより、従来のセンタリング方法が妨げられます。つまり、以下は機能しません。

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

そして、解決策は次のようにはなりません。

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

事前に幅が実際にどうあるべきかわからないため、ユーザーが方程式をクリックすると、方程式全体が強調表示される必要があるため、幅を0に設定できません。この方程式を中央に配置する解決策はありますか？

4

4 に答える 4

140

text-align: center;容器にセットするだけです。

これがデモです。

于 2011-09-29T18:24:27.990 に答える
26

これを行う別の方法 (ブロック要素でも機能します):

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

説明: left:50% は要素を含む親の中心から始まるため、transform: translateX(-50%) で幅の半分だけ引き戻す必要があります。

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

注 2: で垂直方向の中央揃えに変更することもできます。

top:50%;
transform: translateY(-50%);
于 2015-12-03T17:02:53.423 に答える
0

max-content を使用してこれを行うことができます。

.element {
  margin-inline: auto;
  width: max-content;
}

を使用width: fit-contentすることもできます。

于 2022-01-18T10:16:32.503 に答える