HTML電子郵件沒有集中在outlook中

Question

所以我使用表格編寫了一個HTML郵件，但是電子郵件拒絕集中在outlook中，我認爲這與我正在使用的軟件刪除標題信息的事實有關。我將如何將下面的背景顏色居中？

<div class="container" style="width: 100%; background-color: #f8f8f8; vertical-align: center; " 
 
<table class="fullSize" style="width: 100%; border-collapse: collapse; background-color: #f8f8f8;" border="0" cellspacing="0" cellpadding="0" bgcolor="#f8f8f8"> 
 
<tbody> 
 
<tr> 
 
<td style="border-collapse: collapse;" align="center" valign="top"> 
 
<table class="outSide" style="margin: 0px auto; width: 600px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellspacing="0" cellpadding="5" align="center"> 
 
<tbody> 
 
<tr> 
 
<td style="height: 30px;">&nbsp;</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td style="border-collapse: collapse;" align="center"> 
 
<table class="titleTable" style="margin: 0px auto; width: 600px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellspacing="0" cellpadding="10" bgcolor="#8AE872"> 
 
<tbody> 
 
<tr bgcolor="#b8d9ec"> 
 
<td style="padding: 0px 0px 0px; border-collapse: collapse;" align="center"> 
 
<div><img class="fullImage" style="text-decoration: none; width: 600px; height: 193px;" src="xxx" alt="" width="600" height="193" /></div> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
<table class="introBlock" style="margin: 0px auto; padding: 0px; width: 600px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" bgcolor="white"> 
 
<tbody> 
 
<tr> 
 
<td class="introText" style="padding: 10px 10px 10px 10px; border-collapse: collapse; color: #313131; border-top: white solid 15px;" align="left" valign="top"> 
 
<table class="leftInnerContent" style="margin: 0px auto; padding: 0px; width: 570px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellspacing="0" cellpadding="0" bgcolor="white"> 
 
<tbody> 
 
<tr> 
 
<td class="leftInnerBody" style="color: #080935; padding: 15px 20px 15px 20px; margin: 0px; border-bottom: 10px solid white; background: #ffffff;" align="left" valign="top"> 
 
<table class="leftInnerStack" style="margin: 5px; padding: 0px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; color: #080935;" border="0" cellspacing="0" cellpadding="0" bgcolor="white"> 
 
<tbody> 
 
<tr> 
 
<td class="leftInnerStackText" style="width: 520px; background-color: #ffffff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; padding-bottom: 10px;"> 
 
<p style="font-size: 16px; line-height: 1.5em;">Dear Jane Doe,</p> 
 
<p style="font-size: 16px; line-height: 1.5em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus magna turpis, tristique ac ligula id, dignissim venenatis nulla. Suspendisse tincidunt orci eget diam dignissim, a varius nulla aliquam. Vestibulum sed sagittis mi.</p> 
 
<p>&nbsp;</p> 
 
<table> 
 
<tbody> 
 
<tr> 
 
<td style="padding: 7px; background-color: #8b69d3; font-size: 16px; text-decoration: none; color: white;"><a style="padding: 5px 15px; text-decoration: none; color: #ffffff!important;" href="@@SURVEY_URL_PLACEHOLDER__DO_NOT_ERASE" target="_blank"><span style="color: #fff!important; font-weight: lighter; text-transform: uppercase; font-size: 20px;">ANSWER SURVEY &nbsp; ⟩ ⟩ ⟩</span> </a></td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td class="leftInnerBody3" style="color: #080935; padding: 15px 20px 15px 20px; border-bottom: 10px solid white; background: #f8f8f8;" align="left" valign="top"><img style="max-width: 530px; height: auto;" src="xxx" alt="" width="530" height="247" /> 
 
<!-- <table> 
 
\t \t \t \t \t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <td pardot-region="" style="padding: 7px; background-color: #080935; font-size: 12px; text-decoration: none; color: #ffffff!important; "><a href="#" style="padding: 5px 15px; text-decoration:none;color: #ffffff!important;" target="_blank"><font color="#ffffff" style="color: #ffffff!important; font-weight: bold;">Get stared &nbsp;</font> </a></td> 
 
\t \t \t \t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t \t \t </tbody> 
 
\t \t \t \t \t \t \t \t \t </table> --></td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td style="border-collapse: collapse;"> 
 
<table class="outSide" style="margin: 0px auto; width: 600px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellspacing="0" cellpadding="12" align="center" bgcolor="#f8f8f8"> 
 
<tbody> 
 
<tr> 
 
<td style="border-collapse: collapse; background-color: #f8f8f8;" align="center" valign="top" width="600px"> 
 
</td> 
 
</tr> 
 
<!-- <tr> 
 

 
      <td align="center" width="600px" style="border-collapse: collapse; background-color: #f8f8f8;" valign="top"> 
 
       <p><a style="font-size: 16px; color:#484D51; text-decoration: underline;" href="www.interoute.com">www.interoute.com</a></p> 
 
      </td> 
 

 
      </tr> --> 
 
<tr> 
 
<td style="border-collapse: collapse; background-color: #f8f8f8;" align="center" valign="top" width="600px"> 
 
<p style="font-size: 12px; color: #81888d; text-align: center; line-height: 1.5em;">&copy; <a href="@@OPT_OUT_PLACEHOLDER__DO_NOT_ERASE">Unsubscribe</a> @@FooterCompany @@FooterCountry @@FooterCity @@FooterPostCode @@FooterAddress1</p> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table>

Answer 1

我的建議是重新開始，專注於你的代碼的格式。它已經壞掉了，在許多電子郵件客戶端中永遠不會正確讀取。

舉個例子，你有一個未關閉一個div：

<div class="container" style="width: 100%; background-color: #f8f8f8; vertical-align: center; " 

你缺少</div>

開幕表關閉，但有一個</td></tr>具有收表後直接沒有開放表頭或表格行或單元格。

此外，您沒有在樣本中包含樣式表，但是您在表結構中引用了類。所以我們不知道您的樣式是否存在其他問題。

另外，您的電子郵件確實在Outlook中居中。至少沒有樣式表。它不在Gmail中。您目前的代碼狀態不穩定，可能會導致不必要的糟糕結果，這就是爲什麼我鼓勵您在繼續之前重新格式化它的原因。

祝你好運。

Answer 2

您可以通過兩個重要步驟將電子郵件地址body居中。

• 添加的包裝<center>元件
• 有一個包裝table具有固定像素尺寸（百分比大小可以擴展到全寬度）。

這是specific part針對Outlook中的基本中心電子郵件HTML模板，可能對我們的博客系列有幫助。如果您需要更深入的基礎，還會在該系列的背景圖片和佈局方法主題上發佈帖子。