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>
>Solution :
You will need to add 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>