圖像不對齊的權利在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導致模板比設計更容易消除。

這是混合或響應電子郵件的一部分嗎？

乾杯