在浏览器窗口(或电子邮件客户端预览窗格)中居中放置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>