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

Question

我通常使用CSS规则margin:0 auto和960容器作为基于标准浏览器的内容,但我是HTML电子邮件创建的新手,我有以下设计,我现在想要在浏览器窗口中居中,而不使用标准CSS .

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

我似乎记得在某个地方看到它也可以通过将你的电子邮件表设计包装在一个外部表设置为width:100%并text-align:center在tbody或类似的东西上使用一些内联样式来实现它？

这是最好的做法吗？

Answer 1

将表格对齐居中.

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

如果您有"您的内容",如果它是一个表格,请将其设置为所需的宽度,您将拥有居中的内容.

Answer 2

对于谷歌和完整性的缘故:

当我需要经历实施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>

Answer 3

table align ="center"...这使页面的中心对齐.

使用td align ="center"将td中的内容居中,对于居中对齐的文本非常有用,但是您会遇到一些电子邮件客户端在子级别表中居中的问题,因此使用td align作为集中"容器"的顶级方法页面上的表不是这样做的.请改用表格对齐.

仍然使用你的100%包装表,纯粹作为身体的包装,因为一些电子邮件客户端不显示身体背景颜色,但它将显示100%表,所以添加你的身体颜色到身体和100 %表.

关于html电子邮件开发的所有怪癖,我可以继续多年.我只能说是测试和测试.Litmus.com是一个测试电子邮件的好工具.

您做的越多,您就会越了解哪些电子邮件客户端有效.

希望这可以帮助.

Answer 4

我在 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/

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

Answer 5

这是您的防弹解决方案：

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

Answer 6

电子邮件中的CSS很痛苦.不幸的是,您可能需要表,因为并非所有电子邮件客户端都支持CSS.

也就是说,使用HTML Transitional DOCTYPE,而不是XHTML,并使用<center>.

Answer 7

要将表格置于电子邮件的中间，请使用

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

要在中间对齐内容，请使用：

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