html - 修复电子邮件模板的 CSS/HTML

Question

我正在尝试修复电子邮件模板，但我无法让 Logo 居中并位于表格顶部。它的编写方式让我感到困惑，我一直在对其进行更改，但我无法做到正确。如果你能帮助我，我将不胜感激。这是它的样子:

这是我要修复的代码:

<style type="text/css">
@media only screen and (max-width: 480px) {
  table {
    display: block !important;
    width: 100% !important;
  }

  td {
    width: 480px !important;
  }
}
</style>

  <table width="100%" bgcolor="#09afdf" border="0" cellspacing="0" cellpadding="0" id="background" style="height: 100% !important; margin: 0; padding: 0; width: 100% !important;">
    <tr>
      <td align="center" valign="top">
        <table width="600" border="0" bgcolor="#09afdf" cellspacing="0" cellpadding="20" id="preheader">
          <tr>
            <td valign="top">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td valign="top" width="600">
                    <div class="preheader_links">
                      <p style="color: #666666; font-size: 10px; line-height: 22px; text-align: right;">Unable to view this message? <a href="javascript:void(0)" :hover="text-decoration: underline;" onclick="myEvent();" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" style="color: #666666; font-weight: bold; text-decoration: none;">Click here</a></p>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td valign="top" width="600">
                    <div class="logo">
                      <a href="javascript:void(0)" onclick="myEvent();" onmouseover="this.style.color='#666666'" onmouseout="this.style.color='#514F4E'" style="color: #514F4E; font-size: 18px; font-weight: bold; text-align: left; text-decoration: none;"> <img src="http://res.cloudinary.com/dya7pcwuu/image/upload/v1504207932/headerlogo_1_auznv6.png"></a>
                    </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!-- // END #preheader -->

        <table width="600" border="0" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" id="header_container">
          <tr>
            <td align="center" valign="top">
              <table width="100%" border="0" bgcolor="#FF0412" cellspacing="0" cellpadding="0" id="header">
                <tr>
                  <td valign="top" class="header_content">
                    <h1 style="color: #FFFEF7; font-size: 24px; text-align: center;">Submission</h1>
                  </td>
                </tr>
              </table>
              <!-- // END #header -->
            </td>
          </tr>
        </table>
        <!-- // END #header_container -->

        <table width="600" border="0" bgcolor="#fcfcfc" cellspacing="0" cellpadding="20" id="body_container">
          <tr>
            <td align="center" valign="top" class="body_content">
              <table width="100%" border="0" cellspacing="0" cellpadding="20">
                <tr>
  <td valign="top">
    <h2 style="color: #0f060f; font-size: 22px; text-align: center;"><%=@contact.subject%></h2>
    <p style="color: #0f060f; font-size: 14px; line-height: 22px; text-align: center;">Name: <%=@contact.name%></p>

    <p style="color: #0f060f; font-size: 14px; line-height: 22px; text-align: center;">Email: <%=@contact.email%></p>
    <p style="color: #0f060f; font-size: 14px; line-height: 22px; text-align: center;">Phone: <%=@contact.phone%></p>
    <p style="color: #0f060f; font-size: 14px; line-height: 22px; text-align: center;">Message: <%=@contact.message%></p>
  </td>
                </tr>
            </table>
          </td>
        </tr>
      </table>
      <!-- // END #body_container -->

    </td>
  </tr>
</table>
<!-- // END #background -->

更新

我正在尝试这些建议，结果仍然如下图所示。我什至重新启动了服务器，它仍然如此。如果您查看我的代码片段，它会显示在侧面，但如果您查看图像，它就会显示在电子邮件中。每个建议的输出都与下图相同。

更新 2 看起来它被呈现为下图，因为我正在使用的电子邮件客户端有一些我无法弄清楚的东西。

Answer 1

不要使用 <center>如上所述，HTML5 不支持它。我放置了text-align:center在 Logo 的父 td 中，并将 Logo 更改为使用 display:inline .

请考虑通过将所有样式移动到 css 来将您的演示文稿与结构分开。

<style type="text/css">
@media only screen and (max-width: 480px) {
  table {
    display: block !important;
    width: 100% !important;
  }

  td {
    width: 480px !important;
  }
}
</style>

  <table width="100%" bgcolor="#09afdf" border="0" cellspacing="0" cellpadding="0" id="background" style="height: 100% !important; margin: 0; padding: 0; width: 100% !important;">
    <tr>
      <td align="center" valign="top">
        <table width="600" border="0" bgcolor="#09afdf" cellspacing="0" cellpadding="20" id="preheader">
          <tr>
            <td valign="top">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td valign="top" width="600">
                    <div class="preheader_links">
                      <p style="color: #666666; font-size: 10px; line-height: 22px; text-align: right;">Unable to view this message? <a href="javascript:void(0)" :hover="text-decoration: underline;" onclick="myEvent();" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" style="color: #666666; font-weight: bold; text-decoration: none;">Click here</a></p>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td valign="top" width="600" style="text-align:center;">
                    <div class="logo" style="display:inline;">
                      <a href="javascript:void(0)" onclick="myEvent();" onmouseover="this.style.color='#666666'" onmouseout="this.style.color='#514F4E'" style="color: #514F4E; font-size: 18px; font-weight: bold; text-align: left; text-decoration: none;"> <img src="http://res.cloudinary.com/dya7pcwuu/image/upload/v1504207932/headerlogo_1_auznv6.png"></a>
                    </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!-- // END #preheader -->

        <table width="600" border="0" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" id="header_container">
          <tr>
            <td align="center" valign="top">
              <table width="100%" border="0" bgcolor="#FF0412" cellspacing="0" cellpadding="0" id="header">
                <tr>
                  <td valign="top" class="header_content">
                    <h1 style="color: #FFFEF7; font-size: 24px; text-align: center;">Submission</h1>
                  </td>
                </tr>
              </table>
              <!-- // END #header -->
            </td>
          </tr>
        </table>
        <!-- // END #header_container -->

        <table width="600" border="0" bgcolor="#fcfcfc" cellspacing="0" cellpadding="20" id="body_container">
          <tr>
            <td align="center" valign="top" class="body_content">
              <table width="100%" border="0" cellspacing="0" cellpadding="20">
                <tr>
  <td valign="top">
    <h2 style="color: #0f060f; font-size: 22px; text-align: center;"><%=@contact.subject%></h2>
    <p style="color: #0f060f; font-size: 14px; line-height: 22px; text-align: center;">Name: <%=@contact.name%></p>

    <p style="color: #0f060f; font-size: 14px; line-height: 22px; text-align: center;">Email: <%=@contact.email%></p>
    <p style="color: #0f060f; font-size: 14px; line-height: 22px; text-align: center;">Phone: <%=@contact.phone%></p>
    <p style="color: #0f060f; font-size: 14px; line-height: 22px; text-align: center;">Message: <%=@contact.message%></p>
  </td>
                </tr>
            </table>
          </td>
        </tr>
      </table>
      <!-- // END #body_container -->

    </td>
  </tr>
</table>
<!-- // END #background -->