[Alignment] Text alignment classes do not work in Outlook 2016 / Gmail

[drawcard]

How can we reproduce this bug?

<container>
    <row>
      <columns>
        <p class="text-center"><small>
            <webversion class="control-links">Open in browser</webversion>&nbsp; &bull; &nbsp;
            <forwardtoafriend class="control-links">Forward to a friend</forwardtoafriend>&nbsp; &bull; &nbsp;
            <tweet class="control-links">Tweet this email</tweet>
            <br />
            <preferences class="control-links">Preferences</preferences>&nbsp; &bull; &nbsp;
            <unsubscribe class="control-links">Unsubscribe</unsubscribe>
        </p></small>
      </columns>
    </row>
  </container>

<!-- another example with 'singleline' tags added for campaign monitor-->

<container>
    <row>
      <columns>
        <h1 class="text-center">
          <singleline label="Newsletter title">
            Lorem ipsum
          </singleline>
        </h1>
        <h4 class="text-center">
          <singleline label="Issue & date">
            Lorem ipsum
          </singleline>
        </h4>
      </columns>
    </row>
  </container>

What did you expect to happen? The content inside the <p> <h1> <h4> tags should be centered

What happened instead? The content aligns to the left

What email clients does this happen in? Outlook 2016 and Gmail (web)

Possibly related to #924 The Campaign Monitor tags shouldn't be affecting FE as these tags are swapped out with plaintext during the email process, meaning the <p> <h1> <h4> tags need to wrap the CM tags. Also I should add that the problem isn't detectable when viewing the localhost preview in a browser.

[drawcard]

As a workaround, I have had to put a lot of "text-center" classes on parent elements, and had to specify a width + alignment on the element I'm trying to center (580px corresponding to the width of FE's container). It's not ideal but it does seem to force centering on things.

<container class="text-center">
    <row class="text-center">
      <columns class="text-center">
        <p class="dim" style="text-align: center; width: 580px;"><small>
            <webversion class="control-links">Open in browser</webversion>&nbsp; &bull; &nbsp;
            <forwardtoafriend class="control-links">Forward to a friend</forwardtoafriend>&nbsp; &bull; &nbsp;
            <tweet class="control-links">Tweet this email</tweet>
            <br />
            <preferences class="control-links">Preferences</preferences>&nbsp; &bull; &nbsp;
            <unsubscribe class="control-links">Unsubscribe</unsubscribe>
        </p></small>
      </columns>
    </row>
  </container>

<container class="text-center">
    <row class="text-center">
      <columns class="text-center">
        <h1 style="text-align: center; width: 580px;">
          <singleline label="Newsletter title">
            Lorem ipsum
          </singleline>
        </h1>
        <h4 style="text-align: center; width: 580px;">
          <singleline label="Issue & date">
            Lorem ipsum
          </singleline>
        </h4>
      </columns>
    </row>
  </container>

[shnizmuffin]

I don't think styles get inlined on to custom elements. Try putting a class or inline styles directly on to the <singleline> element.

[drawcard]

I did try that but Campaign Monitor strips away the <singleline> element completely so it requires the formatting to be wrapped around it.

[drawcard]

I also have a feeling that's it's more to do with a centered element requiring a fixed width specified - without that the whole thing falls apart :/