Unable to center button on Android Gmail App

[dev169]

Hello and thanks for the great work!

A bit of an issue, I'm trying to center a button, like so (tried the inlined version too):

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
  <tbody>
    <tr>
      <td align="center">
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td>
                <a href="https://example.com/abcdef">Open link</a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

This seems to be working mostly fine on everything I've tested, except a notable case:

On Android 7, using the Gmail app (7.11.5.177402951 if it makes a difference) and on a Xiaomi Redmi Note 4X device, the button is aligned left in portrait orientation. Interestingly, if I rotate the phone, then it is correctly center-aligned.

Any idea how to center-align the button while fitting in with the rest of the styles? Is my approach wrong? I don't think I've edited anything that might affect this. Any kind of workaround would be useful.

[leemunroe]

@dev169 If you add align="center" to the parent table as well does it work?

i.e.

<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" align="center">
  <tbody>
    <tr>
      <td align="center">
        <table border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td>
                <a href="https://example.com/abcdef">Open link</a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

[Ridder90]

I had the same issue! Got this working with align="center" and width:100%!important; on the table and the td containing the actual button.

[leemunroe]

Thanks @Ridder90