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 邮件客户端将引用正文将元素宽度设置为 100%。