'How to center MJML column while using text-align:left

I'm trying to center a mjml container but assign the text to left-adjustment.

I've been playing around with align="center" and text-align in various tags, but I can't seem to find a solution.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column border="1px solid black">
        <mj-text align="center">
          <div style="text-align: left !important;">Text should be in middle of container<br>but left-adjusted.</br>
          </div>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

In my sample code, using align="center" moves the enter text in the middle of the screen (great!) but there's nothing that forces the text to left-adjustment.

html-emailmjml


Solution 1:[1]

It's a little unclear what you want, but I've got a centered container with left-aligned text with the following code:

    <mjml>
      <mj-body>
        <mj-section>
          <mj-column border="1px solid black" align="center">
              <mj-text style="text-align: left;">Text should be in middle of container<br>but left-adjusted.</br>
              </mj-text>
          </mj-column>
        </mj-section>
      </mj-body>
    </mjml>

The key was not to put the mj-text as center aligned, as that's the text part.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Esteban Borai

Related Questions