MathJaxで表示した数式の位置を設定するCSSを紹介する

はじめに

MathJaxで表示した数式の位置を設定するCSSを紹介します。

左寄せ

\[x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\]

以下のいずれかを適用すると上記のように左寄せで数式が表示されます。

左寄せ全体指定

以下はHTML全体に対して数式を左寄せするCSSです。

mjx-container[jax="CHTML"][display="true"] {
    text-align: left !important;
}

左寄せクラス指定

HTMLの数式に対してclassで左寄せを指定するCSSを紹介します。left-math-classというclassを想定しています。

<p class="left-math-class">\[x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\]</p>

以下が上記のHTMLの数式を左寄せするCSSです。

.left-math-class mjx-container[jax="CHTML"][display="true"] {
    text-align: left !important;
}

左寄せid指定

HTMLの数式に対してidで左寄せを指定するCSSを紹介します。left-math-idというidを想定しています。

<p id="left-math-id">\[x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\]</p>

以下が上記のHTMLの数式を左寄せするCSSです。

#left-math-id mjx-container[jax="CHTML"][display="true"] {
    text-align: left !important;
}

右寄せ

\[x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\]

以下のいずれかを適用すると上記のように右寄せで数式が表示されます。

右寄せ全体指定

以下はHTML全体に対して数式を右寄せするCSSです。

mjx-container[jax="CHTML"][display="true"] {
    text-align: right !important;
}

右寄せクラス指定

HTMLの数式に対してclassで右寄せを指定するCSSを紹介します。right-math-classというclassを想定しています。

<p class="right-math-class">\[x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\]</p>

以下が上記のHTMLの数式を右寄せするCSSです。

.right-math-class mjx-container[jax="CHTML"][display="true"] {
    text-align: right !important;
}

右寄せid指定

HTMLの数式に対してidで右寄せを指定するCSSを紹介します。right-math-idというidを想定しています。

<p id="right-math-id">\[x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\]</p>

以下が上記のHTMLの数式を右寄せするCSSです。

#right-math-id mjx-container[jax="CHTML"][display="true"] {
    text-align: right !important;
}