Wie können Sie Ihren HTML-E-Mail-Inhalt am besten im Browserfenster (oder im Vorschaufenster des E-Mail-Clients) zentrieren?

Normalerweise verwende ich CSS-Regeln margin:0 autozusammen mit einem 960-Container für meinen standardmäßigen browserbasierten Inhalt, aber ich bin neu in der Erstellung von HTML-E-Mails und habe das folgende Design, das ich jetzt ohne Standard-CSS im Browserfenster zentrieren möchte .

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

Ich erinnere mich, dass ich irgendwo gesehen habe, dass dies auch erreicht werden kann, indem Sie Ihr E-Mail-Tabellendesign in eine äußere Tabelle einwickeln width:100%und einen Inline-Stil für text-align:centerden Körper verwenden oder so etwas?

Gibt es dafür eine bewährte Methode?

Richten Sie den Tisch auf die Mitte aus.

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

Wenn Sie "Ihren Inhalt" haben, wenn es sich um eine Tabelle handelt, stellen Sie ihn auf die gewünschte Breite ein, und Sie haben den Inhalt zentriert.

Für Googler und Vollständigkeit:

Hier ist eine Referenz, die ich immer verwende, wenn ich mich um die Implementierung von HTML-E-Mail-Vorlagen oder -Signaturen kümmern muss: http://www.campaignmonitor.com/css/

Ich habe eine Liste der CSS-Unterstützung für die meisten, wenn nicht alle CSS-Optionen, die zwischen einigen der am häufigsten verwendeten E-Mail-Clients gut verglichen werden.

Verwenden Sie zum Zentrieren einfach CSS (da das alignAttribut in veraltet ist HTML 4.01).

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

table align = "center" ... richtet die Tabellenmitte der Seite aus.

Wenn Sie td align = "center" verwenden, wird der Inhalt in diesem td zentriert. Dies ist nützlich für zentrierten, ausgerichteten Text. Bei einigen E-Mail-Clients treten jedoch Probleme beim Zentrieren von Inhalten in Tabellen auf untergeordneter Ebene auf. Verwenden Sie daher td align als Methode zum Zentrieren Ihres "Containers" auf oberster Ebene. Tabelle auf der Seite ist nicht der richtige Weg. Verwenden Sie stattdessen die Tabellenausrichtung.

Verwenden Sie Ihre 100% -Wrapper-Tabelle weiterhin auch nur als Wrapper für den Body, da einige E-Mail-Clients keine Body-Hintergrundfarben anzeigen, diese jedoch mit der 100% -Tabelle anzeigen. Fügen Sie also Ihre Body-Farbe sowohl dem Body als auch den 100 hinzu % Tabelle.

Ich könnte ewig über all die Macken von HTML-E-Mail-Entwicklern weitermachen. Alles was ich sagen kann ist Test Test und Test erneut. Litmus.com ist ein großartiges Tool zum Testen von E-Mails.

Je mehr Sie tun, desto mehr erfahren Sie, was in welchen E-Mail-Clients funktioniert.

Hoffe das hilft.

Hier ist Ihre kugelsichere Lösung:

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

Probieren Sie es einfach aus, sieht ein bisschen chaotisch aus, aber es funktioniert auch mit dem neuen Firefox-Update für Yahoo Mail. (zentriert die E-Mail nicht, da die Haupttabelle durch ein div ersetzt wird)

CSS in E-Mails ist ein Schmerz. Sie benötigen wahrscheinlich leider Tabellen, da CSS nicht in allen E-Mail-Clients stark unterstützt wird.

Verwenden Sie jedoch ein HTML Transitional DOCTYPE, nicht XHTML, und verwenden Sie <center>.

Ich hatte Probleme mit Outlook und Office365. Überraschenderweise schien Folgendes zu funktionieren:

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

Ich habe nur einige der wichtigsten Dinge aufgelistet, die meine Microsoft-E-Mail-Probleme gelöst haben.

Könnte ich hinzufügen, dass das Erstellen einer E-Mail, die in allen E-Mails gut aussieht, ein Schmerz ist. Diese Website war super schön zum Testen: https://putsmail.com/

Hier können Sie alle E-Mails auflisten, an die Sie Ihre Test-E-Mail senden möchten. Sie können Ihren Code direkt in das Fenster einfügen, bearbeiten, senden und erneut senden. Es hat mir eine Menge geholfen.

In einigen Fällen schneidet margin = "0 auto" nicht den Senf, wenn eine HTML-E-Mail in Outlook 2007, 2010, 2013 zentriert ausgerichtet wird.

Versuche Folgendes:

Wickeln Sie Ihren Inhalt in eine andere Tabelle mit style = "table-layout: fixed;" und 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>