图像不对齐的权利在Gmail，Outlook和雅虎邮件

Question

我是新来的电子邮件模板设计，我想知道为什么这发生在我的电子邮件模板。第一个屏幕截图是我期望的，其他的分别是在gmail，yahoo和outlook中呈现的内容。我担心的是为什么徽标不能按预期正确排列。我还附上了显示徽标的相应代码。

<tr> 
 
\t <td align="center" valign="top"> 
 
\t <!-- CENTERING TABLE // --> 
 
\t <!-- 
 
\t The centering table keeps the content 
 
\t tables centered in the emailBody table, 
 
\t in case its width is set to 100%. 
 
\t --> 
 
\t <table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#ffffff;" bgcolor="#E1E1E1"> 
 
\t <tr> 
 
\t <td align="center" valign="top"> 
 
\t <!-- FLEXIBLE CONTAINER // --> 
 
\t <!-- 
 
\t The flexible container has a set width 
 
\t that gets overridden by the media query. 
 
\t Most content tables within can then be 
 
\t given 100% widths. 
 
\t --> 
 
\t <table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer"> 
 
\t <tr> 
 
\t <td align="center" valign="top" width="600" class="flexibleContainerCell"> 
 

 
\t <!-- CONTENT TABLE // --> 
 
\t <!-- 
 
\t The content table is the first element 
 
\t that's entirely separate from the structural 
 
\t framework of the email. 
 
\t --> 
 
\t <table border="0" cellpadding="30" cellspacing="0" width="100%"> 
 
\t <tr> 
 
\t <td align="center" valign="top" class="textContent"> 
 
\t <img align="right" alt="accesbank-logo" src="http://oi65.tinypic.com/euel9v.jpg" /><br /><br /> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // CONTENT TABLE --> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // FLEXIBLE CONTAINER --> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // CENTERING TABLE --> 
 
\t </td> 
 
</tr>

Answer 1

您对TD的需要被右对齐的标志是一个应该被右对齐表格中的很多居中的。

我已经添加了一张额外的桌子，并使其与徽标大小相同，并将其对齐。

\t <tr> 
 
\t <td align="right" valign="top"> 
 
\t <!-- CENTERING TABLE // --> 
 
\t <!-- 
 
\t The centering table keeps the content 
 
\t tables centered in the emailBody table, 
 
\t in case its width is set to 100%. 
 
\t --> 
 
\t <table border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#ffffff;" bgcolor="#E1E1E1"> 
 
\t <tr> 
 
\t <td align="right" valign="top"> 
 
\t <!-- FLEXIBLE CONTAINER // --> 
 
\t <!-- 
 
\t The flexible container has a set width 
 
\t that gets overridden by the media query. 
 
\t Most content tables within can then be 
 
\t given 100% widths. 
 
\t --> 
 
\t <table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer"> 
 
\t <tr> 
 
\t <td align="right" valign="top" width="600" class="flexibleContainerCell"> 
 

 
\t <!-- CONTENT TABLE // --> 
 
\t <!-- 
 
\t The content table is the first element 
 
\t that's entirely separate from the structural 
 
\t framework of the email. 
 
\t --> 
 
\t <table border="0" cellpadding="30" cellspacing="0" width="100%"> 
 
\t <tr> 
 
\t <td align="right" valign="top" class="textContent"> 
 

 
\t <table width="152" border="0" align="right" cellpadding="0" cellspacing="0" style="width:100%; max-width: 152px;"> 
 
\t <tbody> 
 
\t <tr> 
 
\t <td align="right"><img alt="accesbank-logo" src="http://oi65.tinypic.com/euel9v.jpg" /></td> 
 
\t </tr> 
 
\t </tbody> 
 
\t </table> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // CONTENT TABLE --> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // FLEXIBLE CONTAINER --> 
 
\t </td> 
 
\t </tr> 
 
\t </table> 
 
\t <!-- // CENTERING TABLE --> 
 
\t </td> 
 
\t </tr>

让我知道这是否修复它。如果这不能解决问题，那么我们将需要更多的代码来查看是否有任何相互冲突的类或ID导致模板比设计更容易消除。

这是混合或响应电子邮件的一部分吗？

干杯