Center align button

Question

I have a button that I need to center align and can't figure out why

I have added the center align attribute to the parent element that contains the button but still doesn't work

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F6F6F6">
  <tr>
    <td width="24"></td>
    <td>
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF" style="border-radius:8px;border:solid #E0E0E0 1px;">
        <tr>
          <td width="24"></td>
          <td>
            <table border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td height="24"></td>
              </tr>
              <tr>
                <td>
                  <table align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#E5133A" style="border-radius:5px;">
                    <tr>
                      <td height="15" colspan="3"></td>
                    </tr>
                    <tr>
                      <td width="20"></td>
                      <td align="center" style="font-family:'Roboto',Arial,sans-serif;font-size:16px;line-height:16px;color:#FFFFFF;font-weight:500;text-align:center; " class="fallback-bold">
                        <a href="" target="_blank" style="color:#FFFFFF;text-decoration:none;" alias="CTA"> Button </a>
                      </td>
                      <td width="20"></td>
                    </tr>
                    <tr>
                      <td height="15" colspan="3"></td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td height="24"></td>
              </tr>
            </table>
          </td>
          <td width="24"></td>
        </tr>
      </table>
    </td>
    <td width="24"></td>
  </tr>
</table>

this is centred for me on your fiddle link – vaske Mar 22 '23 at 09:31 — vaske, Mar 22 '23 at 09:31
sorry, that was the wrong link – Duicug Mar 22 '23 at 09:52 — Duicug, Mar 22 '23 at 09:52

SelVazi · Accepted Answer · 2023-03-22T10:07:45.370

You will need to add margin:auto to the third table

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F6F6F6">
  <tr>
    <td width="24"></td>
    <td>
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF" style="border-radius:8px;border:solid #E0E0E0 1px;">
        <tr>
          <td width="24"></td>
          <td>
            <table border="0" cellpadding="0" cellspacing="0" style="margin: auto;">
              <tr>
                <td height="24"></td>
              </tr>
              <tr>
                <td>
                  <table align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#E5133A" style="border-radius:5px;">
                    <tr>
                      <td height="15" colspan="3"></td>
                    </tr>
                    <tr>
                      <td width="20"></td>
                      <td align="center" style="font-family:'Roboto',Arial,sans-serif;font-size:16px;line-height:16px;color:#FFFFFF;font-weight:500;text-align:center; " class="fallback-bold">
                        <a href="" target="_blank" style="color:#FFFFFF;text-decoration:none;" alias="CTA"> Button </a>
                      </td>
                      <td width="20"></td>
                    </tr>
                    <tr>
                      <td height="15" colspan="3"></td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td height="24"></td>
              </tr>
            </table>
          </td>
          <td width="24"></td>
        </tr>
      </table>
    </td>
    <td width="24"></td>
  </tr>
</table>

Center align button

1 Answers1