103

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

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

メールテーブルのデザインを外側のテーブルにラップし、ボディにwidth:100%インラインスタイルを使用するなどして、それを実現できることをどこかで思い出したようです。text-align:center

このためのベストプラクティスはありますか？

4

8 に答える 8

241

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

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

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

于 2010-05-18T13:48:36.827 に答える
35

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

これは、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>
于 2012-05-31T08:21:26.347 に答える
11

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

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

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

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

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

お役に立てれば。

于 2012-09-15T08:22:18.413 に答える
10

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

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

于 2014-05-22T14:18:12.683 に答える
9

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/

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

于 2016-07-01T16:01:35.017 に答える
6

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

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

于 2010-05-18T13:44:51.870 に答える
4

メールの中央にテーブルを配置するには、

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

コンテンツを途中で揃えるには、次のようにします。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            Your Content
        </td>
    </tr>
</table>
于 2021-01-27T15:12:26.553 に答える
2

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>
于 2015-04-02T17:08:08.487 に答える