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, 2 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, 2 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

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098