How to left align Mathjax elements

Question

Mathjax elements are by default, center aligned.

How can I make Mathjax elements left aligned?

Answer 1

MathJax.Hub.Config({
    jax: ["input/TeX","output/HTML-CSS"],
    displayAlign: "left"
});

Answer 2

Or my solution with CSS:

.MathJax_Display {
  text-align: left !important;
}

It worked for me.

Answer 3

Edit to previous answer, this works perfectly for me

.MathJax_Display { 
    text-align: left !important;
    display: inline !important;
}

Answer 4

The other answers didn't work for me - but what did work was modifying the MathML that MathJax was displaying (and I know there are equivalents for other input formats). I was trying to indent right, but the concept is the same.

For MathML I had to add indentalign="right" to the <math ...> tag, eg:

<math indentalign="right" xmlns="http://www.w3.org/1998/Math/MathML">...</math>

after which MathJax correctly right-aligned my content.

Answer 5

In the current version of MathJax (2.7.5) with the standard configuration TeX-MML-AM_CHTML, the text-align property is set on an element with classes mjx-chtml and MJXc-display. Therefore the solutions building on MathJax_Display won't work anymore.

For more flexibility you can add a parent <div class="math-left-align"> to your math content, such that you can choose how to align your math case-by-case.

Your HTML would then look like

<div class="math-left-align">
    $$ a + b = c $$
</div>

And the corresponding CSS

.math-left-align .mjx-chtml.MJXc-display{
    text-align: left !important;
 }