Gmail on ios browsers cannot center a table within a table

Hello everybody!

We have run into a problem with emails accessed through gmail using browsers on iOS only recently. We have a call to action button that we would like to center on the email. We have previously been able to do this using a table within a table and an align=center, but now it just doesn't work.

Here's an example of the code I'm talking about:

 
<table width="551" height="51" border="1" cellpadding="0" cellspacing="0" class="mobile-content-size" style="min-width:551px;">
       <tr>
              <td height="51" style="text-align:center;" class="cta-one-row">
                    <!-- start button -->
                         <table border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" class="cta-show-them-table" style="color:#6a797b; text-decoration:none; background-color:#3b3b3b; border-radius:3px; width:230px;" height="50">
                             <tr>
                                  <td align="center" valign="middle" height="50" style="color:#FFFFFF;" class="cta-show-them"><a href="#" target="_blank" class="cta-show-them" style="color:#FFFFFF; text-decoration:none; font-family: 'Open Sans', Arial, sans-serif; font-size:16px; line-height:50px; height:50px; font-weight:bold; letter-spacing:-.5px; border:0;" title="Customize ">CALL TO ACTION</a>
</td>
                                    </tr>
                                        </table>
                                        <!-- end button -->
                                    
                                    </td>
                                </tr>
                            </table>
                        

Here's a test screenshot of what it looks like when it renders

Has anyone else run into this sort of problem or have a fix? It's rather important that these buttons are centered!

Thanks!

JohnP JohnP, 3 years ago

Try adding align="center" to the buttons parent td. Something like this should work:

<table width="551" height="51" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td height="51" align="center">
      <!-- start button -->
      <table border="0" bgcolor="#3b3b3b" width="230" height="50" cellpadding="0" cellspacing="0" style="color:#6a797b; border-radius:3px;">
        <tr>
          <td align="center" valign="middle" height="50">
            <a href="#" target="_blank" style="color:#FFFFFE; text-decoration:none; font-family: 'Open Sans', Arial, sans-serif; font-size:16px; line-height:50px; height:50px; font-weight:bold; letter-spacing:-.5px; border:0;" title="Customize ">CALL TO ACTION</a>
          </td>
        </tr>
      </table>
      <!-- end button -->
    </td>
  </tr>
</table>
zerocents zerocents, 3 years ago

The only bulletproof way to center a table is to put a center align on both the <table> and the parent <td>.

<!-- Wrapping table -->

<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td align="center" width="600">

    <!-- Nested Table -->

    <table cellspacing="0" cellpadding="0" border="0" align="center">
      <tr>
        <td width="300" align="left">

        <!-- You need another align on this <td> to prevent centered text -->

        </td>
      </tr>
    </table>

    </td>
  </tr>
</table>

Michael Muscat

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098