HTMLメールコンテンツをブラウザウィンドウ（またはメールクライアントプレビューペイン）の中央に配置するための最良の方法は何ですか？

Question 1

私は通常margin:0 auto、標準のブラウザベースのコンテンツに960コンテナとともにCSSルールを使用しますが、HTMLメールの作成は初めてで、標準のCSSを使用せずにブラウザウィンドウの中央に配置したい次のデザインがあります。

http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html

メールテーブルのデザインを外側のテーブルセットにラップし、tbodyまたはこのようなものにwidth:100%インラインスタイルを使用text-align:centerしてそれを行うことによっても達成できることをどこかで見たことを覚えているようです。

これに関するベストプラクティスはありますか？

Question 2

テーブルを中央に揃えます。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            Your Content
        </td>
    </tr>
</table>

テーブルの場合は「コンテンツ」がある場合は、希望の幅に設定すると、コンテンツが中央に配置されます。

Question 3

グーガーと完全性のために：

これは、htmlメールテンプレートまたは署名を実装するという苦痛を経験する必要があるときに私がいつも使用するリファレンスです：http： //www.campaignmonitor.com/css/

すべてではないにしても、ほとんどのCSSオプションのCSSサポートのリストを、最もよく使用されるいくつかの電子メールクライアント間でうまく比較しました。

センタリングについては、CSSを使用してください（align属性はで非推奨になっているためHTML 4.01）。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center;">
            Your Content
        </td>
    </tr>
</table>

Question 4

table align = "center" ...これはテーブルの中央をページの中央に揃えます。

td align = "center"を使用すると、コンテンツがそのtd内に中央揃えされ、中央揃えのテキストに役立ちますが、一部の電子メールクライアントでは、コンテンツをサブレベルテーブルの中央揃えにする場合に問題が発生するため、「コンテナ」を中央揃えするトップレベルの方法としてtdalignを使用します。ページ上の表はそれを行う方法ではありません。代わりにテーブル整列を使用してください。

一部のメールクライアントは本文の背景色を表示しませんが、100％テーブルで表示されるため、100％ラッパーテーブルも本文のラッパーとして使用してください。本文と100の両方に本文の色を追加してください。％テーブル。

私は、htmlメール開発のすべての癖について何年も続けることができました。私が言えるのは、テストテストと再テストだけです。Litmus.comは、電子メールをテストするための優れたツールです。

やればやるほど、どの電子メールクライアントで何が機能するかを学ぶことができます。

お役に立てれば。

Question 5

これがあなたの防弾ソリューションです：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
    <td width="35%" align="center" valign="top">
      CONTENT GOES HERE
    </td>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
  </tr>
</table>

試してみてください。少し面倒に見えますが、Yahooメール用の新しいFirefoxアップデートでも機能します。（メインテーブルをdivに置き換えるため、電子メールを中央に配置しません）

Question 6

メールのCSSは苦痛です。CSSはすべての電子メールクライアントで十分にサポートされているわけではないため、残念ながらテーブルが必要になる可能性があります。

とはいえ、XHTMLではなくHTML Transitional DOCTYPEを使用し、を使用します<center>。

Question 7

OutlookとOffice365で苦労していました。驚いたことに、うまくいったように見えたのは：

<table align='center' style='text-align:center'>
  <tr>
    <td align='center' style='text-align:center'>
      <!-- AMAZING CONTENT! -->
    </td>
  </tr>
</table>

Microsoftの電子メールの問題を解決した重要な事項の一部のみをリストしました。

すべてのメールで見栄えのするメールを作成するのは面倒だと付け加えてもよいでしょう。このウェブサイトはテストにとても便利でした：https：//putsmail.com/

テストメールの送信先となるすべてのメールを一覧表示できます。コードをウィンドウに直接貼り付け、編集、送信、および再送信できます。それは私にトンを助けました。

Question 8

Outlook 2007、2010、2013でHTMLメールを中央揃えにするときに、margin = "0auto"がマスタードをカットしない場合があります。

次のことを試してください。

style = "table-layout：fixed;"を使用して、コンテンツを別のテーブルにラップします。そしてalign =“ center”。

<!-- WRAPPING TABLE -->
<table cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;" align="center">
  <tr>
    <td>
      <!-- YOUR TABLES AND EMAIL CONTENT GOES HERE -->
    </td>
  </tr>
</table>