在 Outlook.com 中居中对齐电子邮件答案

【问题标题】：center align email in outlook.com在 Outlook.com 中居中对齐电子邮件
【发布时间】：2012-10-15 11:19:22
【问题描述】：

我创建了一个非常简单的 html 电子邮件。 http://staging.xhtml-lab.com/mailtest/

除了 hotmail.com/outlook.com 之外，所有电子邮件客户端都可以正常工作

在 hotmail 电子邮件中是左对齐的，它应该保持居中对齐。

我已按照 emailology.org 的建议添加了以下代码，但没有效果。

<style type=“text/css”>
/**This is to overwrite Hotmail’s Embedded CSS************/
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #00788a} 
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
p {margin-bottom: 0}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
/**This is to center your email in Hotmail************/
.ExternalClass {width: 100%;}
</style>

对于我还能做些什么来使电子邮件中心对齐，有什么建议吗？

【问题讨论】：

问题可能是<center>。我确定是否所有电子邮件客户端都支持这一点，并且众所周知，MS Outlook/hotmail 对他们支持的内容特别挑剔。此页面可能会有所帮助：campaignmonitor.com/css

标签： html-email email-client hotmail outlook.com

【解决方案1】：

这应该会给你一个居中的电子邮件：

<table style="width: 100%; background: red;">
  <tr>
    <td>
      <center>
        <table style="width: 640px; background: blue; margin: 0 auto; text-align: left;">
          <tr>
            <td>
              Your content here
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

center-tag 是 Outlook 和 Outlook.com 所需要的。其他客户端使用margin 属性。在某些客户端中，文本在center-tag 之后居中，因此需要text-align 属性。

如果您希望宽度根据屏幕大小变化，请使用以下代码：

<table style="width: 100%; background: red;">
  <tr>
    <td>
      <center>
        <!--[if mso]>
        <table style="width: 640px;"><tr><td>
        <![endif]-->
        <div style="max-width: 800px; margin: 0 auto;">
          <table style="background: blue; text-align: left;">
            <tr>
              <td>
                Your content here
              </td>
            </tr>
          </table>
        </div>
      </center>
      <!--[if mso]>
      </td></tr></table>
      <![endif]--> 
    </td>
  </tr>
</table>

Outlook 不支持max-width，因此 Outlook 的大小固定为 640 像素。对于所有其他客户端，电子邮件的宽度将与查看窗口的宽度相同，但最大为 800 像素。

如果您发现这些解决方案不起作用的客户，请告诉我，以便我们找到适用于尽可能多客户的解决方案。

【讨论】：

<center> 标签本身就解决了我的 Hotmail/Outlook 问题。

【解决方案2】：

这是我构建的一个，用作我所有电子邮件的起点。它适用于所有主要的电子邮件客户端 100%：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title></head>
<body style="margin: 0px; padding: 0px background-color: #FFFFFF;" bgcolor="#FFFFFF"><!-- << bg color for forwarding (leave white) // main bg color >> --><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td>
<!-- CENTER FLOAT WIDTH -->
<table width="600" border="0" valign="top" align="center" cellpadding="0" cellspacing="0"><tr><td><!-- Master Width of the center panel -->
preheader...
<!-- CENTER PANEL BG COLOR (to hide separation of tables on email forward from Outlook (known issue) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td><!-- Master Color of the center panel -->

content...

<!-- /CENTER BG COLOR -->
</td></tr></table>

<!-- /CENTER FLOAT WIDTH -->
</td></tr></table>
<!-- /CENTER FLOAT -->
</td></tr></table></body></html>

当有人转发电子邮件时，它有一个内置的白色背景（他们可以在白色上键入，而 html 设计部分的背景保持彩色）。此外，主面板设置了 bgcolor，因为 Outlook 在转发时会在表格之间放置间隙。

希望对您有所帮助。

【讨论】：

这实际上对我帮助很大，谢谢！无法让电子邮件在 Outlook Office 365 和 Outlook 2010 之间居中...具有相同的标签，但显然您的顺序有所不同，正确并且可以在所有客户端中居中电子邮件。谢谢！
讨厌承受坏消息，但没有什么能在所有电子邮件客户端上 100% 起作用。
@Goose。对于所有主要客户，它确实如此。我在答案中添加了“主要”，因为有很多鲜为人知的客户服务，比如 Litmus 没有测试。

【解决方案3】：

您还可以通过将align="center"添加到您的主表格标签来使您的电子邮件模板居中：

    <body>
      <table align="center">
        <tr>
          <td style="width:600px;">
            <!-- content -->
          </td>
        </tr>
      </table>
   </body>

【讨论】：

【解决方案4】：

适用于 GMail 和 Outlook

<body style="width:600px;margin: auto;">
   <!-- content -->
</body>

【讨论】：