在浏览器窗口（或电子邮件客户端预览窗格）中将HTML电子邮件内容居中的最佳方法是什么？

我通常将CSS规则margin:0 auto与960容器一起用于基于标准浏览器的内容，但是我是HTML电子邮件创建的新手，因此我想将以下设计放在没有标准CSS的浏览器窗口中。

http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html

我似乎还记得在某个地方，也可以通过将您的电子邮件表设计包装到外部表集中width:100%并text-align:center在主体上使用某种内联样式或类似的方式来完成它，来完成此操作？

是否有最佳做法？

将桌子对准中心。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            Your Content
        </td>
    </tr>
</table>

如果您有“您的内容”（如果是表格），请将其设置为所需的宽度，您将获得居中的内容。

为了Google员工和完整性起见：

当需要经历实现html电子邮件模板或签名的痛苦时，这是我经常使用的参考：http : //www.campaignmonitor.com/css/

我没有列出大多数（如果不是全部）CSS选项的CSS支持，可以很好地与一些最常用的电子邮件客户端进行比较。

为了居中，请随意使用CSS（因为中align已弃用该属性HTML 4.01）。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center;">
            Your Content
        </td>
    </tr>
</table>

table align =“ center” ...这将使页面的表格中心对齐。

使用td align =“ center”将td内的内容居中，这对于居中对齐的文本很有用，但是某些电子邮件客户端会将内容居中在子级表中时会遇到问题，因此将td align用作将“容器”居中的顶级方法页面上的表格不是这样做的方法。请改用表格对齐。

仍然仍然使用100％包装器表，纯粹用作身体的包装器，因为某些电子邮件客户端不显示身体背景色，但是会与100％表一起显示，因此请将您的身体颜色添加到身体和100 ％表。

关于HTML电子邮件开发人员的所有怪癖，我可以继续讨论很长时间。我只能说是测试再测试。Litmus.com是测试电子邮件的绝佳工具。

您做得越多，您就会了解在哪些电子邮件客户端中有效的方法。

希望这可以帮助。

这是您的防弹解决方案：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
    <td width="35%" align="center" valign="top">
      CONTENT GOES HERE
    </td>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
  </tr>
</table>

只是尝试一下，看起来有点混乱，但即使使用适用于Yahoo邮件的新Firefox Update，它也可以使用。（不将电子邮件居中，因为将主表替换为div）

电子邮件中的CSS很麻烦。不幸的是，您可能需要表格，因为并非所有电子邮件客户端都大力支持CSS。

也就是说，请使用HTML Transitional DOCTYPE（而不是XHTML），并使用<center>。

我在Outlook和Office365方面苦苦挣扎。令人惊讶的是，似乎起作用的是：

<table align='center' style='text-align:center'>
  <tr>
    <td align='center' style='text-align:center'>
      <!-- AMAZING CONTENT! -->
    </td>
  </tr>
</table>

我只列出了解决Microsoft电子邮件问题的一些关键事项。

我可能会补充说，构建一个在所有电子邮件上看起来都不错的电子邮件是很痛苦的。这个网站非常适合测试：https：//putsmail.com/

它使您可以列出要发送测试电子邮件的所有电子邮件。您可以将代码直接粘贴到窗口中，进行编辑，发送和重新发送。它帮助了我很多。

在某些情况下，在Outlook 2007、2010、2013中居中对齐html电子邮件时，margin =“ 0 auto”不会削减芥末。

请尝试以下操作：

使用style =“ table-layout：fixed;”将您的内容包装在另一个表中。和align =“ center”。

<!-- WRAPPING TABLE -->
<table cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;" align="center">
  <tr>
    <td>
      <!-- YOUR TABLES AND EMAIL CONTENT GOES HERE -->
    </td>
  </tr>
</table>