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

Question

我正在尝试修复一个电子邮件模板，但我无法将徽标置于中心位置，而是在桌面上。写它的方式令我困惑，我不断改变它，我无法做到正确。如果你能帮助我，我将不胜感激。这是它的样子：

以下是我要修复的代码：

<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放置在徽标的父级td中，并将徽标更改为使用display:inline。

请考虑将所有样式移至css，从而将您的演示文稿与结构分开。

＆＃13;

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将以下样式添加到徽标图片周围的<td>标记即可。这会将<td>的内容放入中心。

style="text-align: center;"

<td valign="top" width="600" style="text-align: center;"> <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="your_image_url"></a> </div> </td>

Answer 3

＆＃13;

＆＃13;

<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;"><center><img src="http://res.cloudinary.com/dya7pcwuu/image/upload/v1504207932/headerlogo_1_auznv6.png"></center></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 -->

＆＃13;

＆＃13;

＆＃13;

<center></center>修复了它

Answer 4

＆＃13;

＆＃13;

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

  td {
    width: 480px !important;
  }
  
}
.logo a img {
    // center the image inside the div.logo by adding margin: auto
    display: block;
    margin: auto;
  }
</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 -->

＆＃13;

＆＃13;

＆＃13;