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には、2つの重要なステップを中心に調整することができます。

• ラッパー<center>素子
• を追加（パーセントサイズは、フル幅に拡張することができる）固定ピクセルサイズでラッパーtableを持っています。

これは、参考になる可能性のあるOutlookシリーズの基本的な電子メールHTMLテンプレートのspecific partです。より深い基礎が必要な場合は、シリーズの背景イメージとレイアウト方法のトピックについての記事もあります。