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

我通常对margin:0 auto使用CSS规则margin:0 auto和960容器,用于基于标准浏览器的内容,但是我不熟悉HTML电子邮件创build,并且我现在想要在浏览器中设置以下devise窗口没有标准的CSS。

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

我似乎记得在某处看到,它也可以通过将你的电子邮件表devise包装在一个设置为width:100%的外部表格中,并使用一些内联样式来实现text-align:center以tbody为text-align:center还是这样做呢?

有这个最好的做法吗?

将表格alignment。

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

如果您的表格中包含“您的内容”,请将其设置为所需的宽度,然后您将拥有居中的内容。

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

这里有一个引用我总是使用时,我需要经历的HTML电子邮件模板或签名的痛苦: http : //www.campaignmonitor.com/css/

对于绝大多数(如果不是全部的话)CSS选项,我都列出了一些CSS支持,在一些最常用的电子邮件客户端之间做了很好的比较。

为了居中,随意使用CSS(因为在HTML 4.01不赞成使用align属性)。

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

table align =“center”…这alignment页面的中心。

使用td align =“center”将td中的内容居中,对于居中alignment的文本非常有用,但是对于一些电子邮件客户端将内容集中在子级别表中,因此使用td align作为居中“容器”在页面上的表是不是做到这一点。 使用表alignment。

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

我可以继续讨论所有html电子邮件开发的怪癖。 我只能说是testingtesting和再testing。 Litmus.com是testing电子邮件的好工具。

你越做越多,你将了解哪些电子邮件客户端有效。

希望这可以帮助。

电子邮件中的CSS是一个痛苦。 不幸的是,你可能会需要表格,因为在所有的电子邮件客户端中都不支持CSS。

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

这是你的防弹解决scheme:

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

只是试试看,看起来有点乱,但它的工作即使是新的雅虎邮件Firefox更新。 (不要居中电子邮件,因为用divreplace主表)

我正在与Outlook和Office365挣扎。 令人惊讶的是,似乎工作的是:

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

我只列出了解决我的微软电子邮件问题的一些关键的东西。

我可以补充说,build立一个电子邮件看起来不错,在所有的电子邮件是一个痛苦。 这个网站testing非常好: https : //putsmail.com/

它可以让你列出你想发送testing邮件的所有电子邮件。 您可以将代码粘贴到窗口中,编辑,发送和重新发送。 它帮了我一吨。

在某些情况下,在Outlook 2007,2010,2013中alignmenthtml电子邮件时,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>