HTML电子邮件模板居中
问题描述：
我正在制作一个电子邮件模板，其中包含2个链接到一个网站和一个电子邮件地址。它们的宽度都是不同的，并且它们的设置使它们彼此相邻并居中居中。HTML电子邮件模板居中
最近在使用Outlook进行测试时遇到了问题，并且看到这些框未居中，而是被推向左侧和右侧。
这里是发生了什么事的一些截图：
浏览器/其它电子邮件客户端：
展望/字模版引擎：
代码：
<td style="padding-bottom:0px; padding-left:10px; padding-right:10px; padding-top:22px; " align="center">
<table class="contact_links_container" border="0" cellspacing="0" cellpadding="0" width="580" align="center" style="margin:auto; ">
<tr>
<td align="center">
<div class="templateEdit" id="contact_links">
<table class="contact_button_container" style="margin: auto;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<a href="http://www.domain.com">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" height="20" align="center" valign="middle">
<a href="http://www.domain.com/">
<img src="/images/icn_globe.png" border="0" alt="" width="18" height="18" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="http://www.domain.com/">www.domain.com</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
<table class="contact_button_container" style="margin: auto;" cellspacing="0" cellpadding="0" align="right">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<a href="mailto:[email protected]"></a>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" align="center" valign="middle">
<a href="mailto:[email protected]">
<img src="images/icn_grey_mail.png" border="0" alt="" width="21" height="20" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="mailto:[email protected]">Email</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
有没有人有任何想法，我如何格式化它，以便它的作品出现在Outlook中，就像它在第一张图片中那样？
根据需要指定div和td的宽度。它应该工作，如果未指定，outlook邮件客户端会将元素宽度设置为100％，并引用body。
答
根据需要指定div和td的宽度。它应该工作，如果未指定，outlook邮件客户端会将元素宽度设置为100％，并引用body。
我只能说，有些人的全职工作只是让电子邮件在所有应用程序中都看起来不错......这是PITA（A **中的痛苦）。在我自己的试验中，虽然很少，但在某些情况下，似乎老派的HTML工作比现代更好...所以，尝试老派的
回答
根据需要指定div和td的宽度。它应该工作，如果未指定，outlook邮件客户端会将元素宽度设置为100％，并引用body。
相关问题