我创建了一个非常简单的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>
我还有什么其他建议可以使电子邮件中心对齐?
最佳答案
这应该给您一封集中的电子邮件:
<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
标记之后居中,因此需要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的大小固定为640px。对于所有其他客户端,电子邮件的宽度将与查看窗口的宽度相同,但最大为800px。如果您找到无法使用这些解决方案的客户,请告诉我,以便我们找到可以与尽可能多的客户一起使用的解决方案。
关于html-email - 中心在Outlook.com中对齐电子邮件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13065795/