How to align formula to the left in <math> block element?

By default, the content in a <math> block element will be aligned to the center.

One way to change the alignment inside a <math> element is to use the CSS "text-align: start;" property, in the same way as in the <p> element.

Here is an HTML document, math-as-Block-Element-text-align.html, that shows you how to use <math> as a block element:

<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<style>
p {background-color: #e7e7e7;}
math {border: 1px solid #ff4444; background-color: #ffdddd;}
math.aligned {text-align: start;}
</style>
</head>
<body>

<p><math> as block elements aligned to center by default:
</p>

<math display="block">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mo>…</mo>
</math>

<math display="block">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn>
<mo>+</mo><mn>7</mn><mo>+</mo><mn>8</mn><mo>+</mo><mn>9</mn><mo>+</mo><mo>…</mo>
</math>

<p><math> as block elements with CSS "text-align: start;":
</p>

<math display="block" class="aligned">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mo>…</mo>
</math>

<math display="block" class="aligned">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn>
<mo>+</mo><mn>7</mn><mo>+</mo><mn>8</mn><mo>+</mo><mn>9</mn><mo>+</mo><mo>…</mo>
</math>

</body>
</html>

Here is how the above HTML document is rendered in Firefox:

⇒ Use "math" Block Element as Flex Item

⇐ Use "math" as Block Element

⇑ Introduction to MathML (Mathematical Markup Language)

⇑⇑ MathML (Mathematical Markup Language)