创建电子邮件团队问题

Question

我正在尝试创建类似以下的电子邮件模板。我用桌子。我能够做一切事情，除了图像不显示在适当的位置。图像应显示在容器的中间和顶部（请参阅屏幕1），但我无法完成。我试图提供negative margin到container，但Gmail和其他邮件服务都忽略了负边距。

这就是我能accomplishd直到至今。

该代码是本here。任何人都可以请帮忙吗？

Answer 1

正如我所说的：

如果是我，我会做边框与图像的行。 - 亚历 托马斯23分钟前

更改你顶行：

<td valign="bottom"> 
    <b style="border-top-left-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-right:none;">&nbsp;</b> 
</td> 
<td class="text-center" width="64"> 
    <img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png"> </td> 
<td valign="bottom"> 
    <b style="border-top-right-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-left:none;">&nbsp;</b> 
</td> 

检查出来的结果 - http://jsfiddle.net/562ux。

我还没有在电子邮件客户端中测试过这个，但正如@Kheema Pandey所说，您应该尝试使用内联样式。

Answer 2

在创建新闻简报时使用inline style是个好习惯。前景也不支持margin negative属性。

在你的情况下，图像不会出现在中心，所以你可以在这里使用内联样式'style =“text-align：center;”'。

<td style="text-align:center;"> 
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png" /> 
</td> 

Answer 3

最后回答：

您不能在html电子邮件中使用负边距。为了模仿这个，有2种方式来做到这一点，嵌套表的方式和更复杂的行跨度方式：

<!-- The nested way --> 

<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook --> 
    <tr> 
    <td width="200" height="80" bgcolor="#007700"> 
     <table width="100%" height="80" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td height="40" bgcolor="#FFFFFF">&nbsp; 
      </td> 
     </tr> 
     <tr> 
      <td height="40" bgcolor="#CCCCCC">&nbsp; 
      </td> 
     </tr> 
     </table> 
    </td> 
    <td width="100" height="80" bgcolor="#4444FF"> 
    <img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    <td width="200" height="80" bgcolor="#FFFFFF"> 
     <table width="100%" height="80" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td height="40" bgcolor="#FFFFFF">&nbsp; 
      </td> 
     </tr> 
     <tr> 
      <td height="40" bgcolor="#CCCCCC">&nbsp; 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
    <tr> 
    <td width="500" height="200" colspan="3">&nbsp; 
    </td> 
</tr> 
</table> 

<br><br> 

<!-- The fancy rowspan way --> 

<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook --> 
    <tr> 
    <td width="200" height="40" bgcolor="#FFFFFF">&nbsp; 
    </td> 
    <td width="100" height="80" rowspan="2" bgcolor="#4444FF"> 
    <img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    <td width="200" height="40" bgcolor="#FFFFFF">&nbsp; 
    </td> 
    </tr> 
    <tr> 
    <td width="200" height="40">&nbsp; 
    </td> 
    <td width="200" height="40">&nbsp; 
    </td> 
    </tr> 
    <tr> 
    <td width="500" height="200" colspan="3">&nbsp; 
    </td> 
</tr> 
</table> 

---

原来的答复：

对于基本定位：

平铺，使用align="left|center|right"，垂直使用valign="top|middle|bottom"

以下是如何放置图像中心顶部的表格：

的

<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> 
    <tr> 
    <td height="500" align="center" valign="top"> 
     <img alt="" src="" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    </tr> 
</table>