web-dev-qa-db-ja.com

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

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

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

メールテーブルのデザインをwidth:100%に設定された外部テーブルにラップし、tbodyまたはこのような何かにtext-align:centerのインラインスタイルを使用することで達成できることをどこかで思い出したようです。 ？

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

html-emailcss-tables
78
Joel Glovier

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

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

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

188
Shadi Almosri

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

これは、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>
27
Justus Romijn

table align = "center" ...これにより、ページの表の中央が揃えられます。

Td align = "center"を使用すると、そのtd内のコンテンツが中央揃えになります。中央揃えのテキストには便利ですが、サブレベルテーブルのコンテンツを中央揃えにする電子メールクライアントで問題が発生します。ページ上の表はそれを行う方法ではありません。代わりにテーブルの整列を使用してください。

一部のメールクライアントは本文の背景色を表示しないが、100％の表で表示されるため、100％のラッパーテーブルも純粋に本文のラッパーとして使用します。 ％ テーブル。

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

何をすればするほど、どの電子メールクライアントで何が機能するかがわかります。

お役に立てれば。

9
user1673115

電子メールのCSSは苦痛です。 CSSはすべてのメールクライアントで大きくサポートされているわけではないため、残念ながらテーブルが必要になるでしょう。

ただし、XHTMLではなくHTML Transitional DOCTYPEを使用し、<center>を使用します。

6
Seb

防弾ソリューションは次のとおりです。

<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に置き換えるため、メールを中央に配置しません）

5
user3408238

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/

テストメールを送信するすべてのメールを一覧表示できます。コードをウィンドウに直接貼り付け、編集、送信、再送信できます。とても助かりました。

4
Trevor Nestman

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

以下を試してください：

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>
2
Anas