HTML电子邮件模板居中

Question

我正在制作一个电子邮件模板，其中包含2个指向网站的链接和一个电子邮件地址。它们都有不同的宽度，并且设置成它们彼此相邻并且在中间向下居中。

最近在使用Outlook进行测试时遇到了一个问题，并发现这些框没有居中，而是向左和向右推。

以下是正在发生的事情的截图：

浏览器/其他电子邮件客户端：

Outlook / Word模板引擎：

守则：

<td style="padding-bottom:0px; padding-left:10px; padding-right:10px; padding-top:22px; " align="center">
  <table class="contact_links_container" border="0" cellspacing="0" cellpadding="0" width="580" align="center" style="margin:auto; ">
    <tr>
      <td align="center">
        <div class="templateEdit" id="contact_links">
          <table class="contact_button_container" style="margin: auto;" border="0" cellspacing="0" cellpadding="0" align="left">
            <tbody>
              <tr>
                <td style="width: 10px;" width="10">&nbsp;</td>
                <td>
                  <a href="http://www.domain.com">
                    <table border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
                            <table border="0" cellspacing="0" cellpadding="0">
                              <tbody>
                                <tr>
                                  <td style="padding-right: 10px;" height="20" align="center" valign="middle">
                                    <a href="http://www.domain.com/">
                                      <img src="/images/icn_globe.png" border="0" alt="" width="18" height="18" />
                                    </a>
                                  </td>
                                  <td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="http://www.domain.com/">www.domain.com</a>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </a>
                </td>
                <td style="width: 10px;" width="10">&nbsp;</td>
              </tr>
              <tr>
                <td style="height: 20px;" colspan="3" height="20">&nbsp;</td>
              </tr>
            </tbody>
          </table>
          <table class="contact_button_container" style="margin: auto;" cellspacing="0" cellpadding="0" align="right">
            <tbody>
              <tr>
                <td style="width: 10px;" width="10">&nbsp;</td>
                <td>
                  <a href="mailto:email@domain.com"></a>
                  <table border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr>
                        <td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
                          <table border="0" cellspacing="0" cellpadding="0">
                            <tbody>
                              <tr>
                                <td style="padding-right: 10px;" align="center" valign="middle">
                                  <a href="mailto:newaccounts@domain.com">
                                    <img src="images/icn_grey_mail.png" border="0" alt="" width="21" height="20" />
                                  </a>
                                </td>
                                <td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="mailto:apisupport@domain.com">Email</a>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
                <td style="width: 10px;" width="10">&nbsp;</td>
              </tr>
              <tr>
                <td style="height: 20px;" colspan="3" height="20">&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </table>
</td>

有没有人对我如何格式化它有任何想法，以便它可以像在第一张图像中那样在Outlook中显示？

Answer 1

在需要的地方指定div和td的宽度。它应该工作，outlook邮件客户端将参考body（如果未指定）将元素宽度设置为100％。