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

89

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?

html-email css-tables Joel Glovier
quelle
2
"margin: 0px auto" .. nur zu Ihrer Information, wenn Sie 0irgendetwas verwenden, müssen Sie keine Einheit angeben :)
Matt

Antworten:

204

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.

Shadi Almosri
quelle
Gibt es eine CSS-Eigenschaft, die dasselbe tut? text-align: centermacht nicht das Gleiche.
Sawtaytoes
1
Einige E-Mail-Anbieter benötigen diese veraltete Methode zum Zentrieren von Objekten. (Ich denke an Apple Mail).
Drazzah
79
Wenn Sie für E-Mail-Layouts codieren, codieren Sie buchstäblich wie 1999.
Captain Hypertext
Dies führt dazu, dass untergeordnete Tabellen tdauch in Outlook Web App (OWA) zentriert sind , unabhängig davon, ob für sie die Ausrichtung festgelegt ist leftoder nicht.
Ishmael
30

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>
Justus Romijn
quelle
6
Funktioniert nicht, wenn Sie eine Tabelle oder ein anderes Element auf Blockebene zentrieren.
Roman
Sie haben Recht, ich bin mir nicht sicher, ob dies margin: 0 auto;unterstützt wird (in Kombination mit a width), aber das funktioniert normalerweise für Browser, aber ich bin mir nicht sicher, ob E-Mail-Clients in dieser Situation gut funktionieren.
Justus Romijn
2
Ja, ich war mir nicht sicher, ob alle Browser dies unterstützen würden, also entschied ich mich für das vertrauenswürdige, aber veraltete <center> -Tag.
Roman
10

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.


quelle
7

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)

user3408238
quelle
1
Die kleine unsichtbare "Periode" sollte möglicherweise durch eine & nbsp; und die Anweisungen, um die kleine unsichtbare Periode unsichtbar zu machen, sollten fallengelassen werden. Ich konnte mit diesen Einstellungen nicht einmal eine Test-E-Mail an mich selbst weiterleiten, da sie direkt an die Spam-Hölle meines Anbieters gingen :) Malware-Abwehrmaßnahmen machen alles, was nach Fisch riecht, noch fischiger ... zB: `<td width =" 33% "ausrichten = "center" valign = "top"> </ td> `
Techmag
6

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

Seb
quelle
4

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.

Trevor Nestman
quelle
2

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>
Anas
quelle
1
Warum ein tabledafür verwenden, wenn es nur eine Zeile und eine Spalte geben wird? Sie verwenden keine Funktionen des tableElements.
dg99
Sie verwenden eine Tabelle in HTML-E-Mails, da die Lösung für jedes Problem mit HTML-E-Mails, das auf fast allen Clients funktioniert, darin besteht, "eine weitere Tabelle hinzuzufügen"
user254694,