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 Mail Client將參考正文將元素寬度設置為100％。