Qual è il modo migliore per centrare il contenuto della posta elettronica HTML nella finestra del browser (o nel riquadro di anteprima del client di posta elettronica)?

93

Normalmente uso le regole CSS margin:0 autoinsieme a un contenitore 960 per il mio contenuto basato su browser standard, ma sono nuovo nella creazione di email HTML e ho il seguente design che vorrei centrare ora nella finestra del browser senza CSS standard .

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

Mi sembra di ricordare di aver visto da qualche parte che può essere realizzato anche avvolgendo il design della tua tabella di posta elettronica in un tavolo esterno width:100%e usando uno stile in linea per text-align:centeril corpo o qualcosa del genere per farlo?

Esiste una best practice per questo?

html-email  css-tables 
— Joel Glovier
fonte
2
"margin: 0px auto" .. solo per tua informazione, quando usi 0qualcosa, non devi specificare un'unità :)
— Matt

Risposte:

212

Allinea il tavolo al centro.

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

Dove hai "il tuo contenuto" se è una tabella, impostalo alla larghezza desiderata e avrai il contenuto centrato.

— Shadi Almosri
fonte
C'è una proprietà CSS che fa la stessa cosa? text-align: centernon sta facendo la stessa cosa.
— Kevin Ghadyani
1
Alcuni provider di posta elettronica richiedono questo metodo deprecato per centrare gli oggetti. (Sto pensando ad Apple Mail).
— Drazzah
84
Quando si codifica per i layout di posta elettronica, si codifica letteralmente come se fosse il 1999.
— Captain Hypertext
Ciò fa sì che le tabelle figlio abbiano centrato tdanche i messaggi in Outlook Web App (OWA), indipendentemente dal fatto che abbiano l'allineamento impostato lefto meno.
— Ishmael
30

Per googler e completezza:

Ecco un riferimento che uso sempre quando devo affrontare il problema di implementare modelli di email o firme html: http://www.campaignmonitor.com/css/

È un elenco di supporto CSS per la maggior parte, se non tutte, le opzioni CSS, ben confrontate tra alcuni dei client di posta elettronica più utilizzati.

Per il centraggio, sentiti libero di usare semplicemente CSS (poiché l' alignattributo è deprecato in 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
fonte
6
Non funziona se stai centrando una tabella o un altro elemento a livello di blocco.
— Roman
Hai ragione, non sono sicuro che margin: 0 auto;sia supportato (in combinazione con a width), ma di solito funziona per i browser, ma non sono sicuro che i client di posta elettronica vadano d'accordo in quella situazione.
— Justus Romijn
2
Sì, non ero sicuro che tutti i browser lo supportassero, quindi ho scelto il tag <center> fidato ma deprecato.
— Roman
10

table align = "center" ... questo allinea il centro della tabella della pagina.

L'uso di td align = "center" centra il contenuto all'interno di quel td, utile per il testo allineato centrato ma si avranno problemi con alcuni client di posta elettronica che centrano il contenuto nelle tabelle di livello inferiore, quindi utilizzando td align come metodo di primo livello per centrare il "contenitore" la tabella sulla pagina non è il modo per farlo. Utilizza invece l'allineamento della tabella.

Usa ancora anche la tua tabella wrapper 100%, puramente come wrapper per il corpo, poiché alcuni client di posta elettronica non visualizzano i colori di sfondo del corpo ma lo mostreranno con la tabella 100%, quindi aggiungi il colore del tuo corpo sia al corpo che al 100 % tavolo.

Potrei andare avanti all'infinito per anni su tutte le stranezze dello sviluppo di e-mail html. Tutto quello che posso dire è prova prova e prova di nuovo. Litmus.com è un ottimo strumento per testare le email.

Più fai, più imparerai su cosa funziona in quali client di posta elettronica.

Spero che sia di aiuto.

7

Ecco la tua soluzione a prova di proiettile:

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

Basta provarlo, sembra un po 'disordinato, ma funziona anche con il nuovo aggiornamento di Firefox per Yahoo Mail. (non centra l'email perché sostituisce la tabella principale con un div)

— user3408238
fonte
1
Il piccolo "punto" invisibile dovrebbe essere sostituito con forse un & nbsp; e le istruzioni per rendere invisibile il piccolo periodo invisibile dovrebbero essere eliminate. Non sono riuscito nemmeno a ricevere un'e-mail di prova con quelle impostazioni mentre andavano direttamente all'inferno dello spam dei miei fornitori :) Le difese antimalware rendono tutto ciò che ha un odore di pesce ancora più pericoloso ... ad esempio: `<td width =" 33% "align = "center" valign = "top"> & nbsp; </td> `
— Techmag
6

Il CSS nelle e-mail è un dolore. Sfortunatamente avrai probabilmente bisogno di tabelle, perché CSS non è molto supportato in tutti i client di posta.

Detto questo, usa un DOCTYPE di transizione HTML, non XHTML, e usa <center>.

— Seb
fonte
5

Stavo lottando con Outlook e Office365. Sorprendentemente, la cosa che sembrava funzionare era:

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

Ho elencato solo alcune delle cose chiave che hanno risolto i miei problemi di posta elettronica Microsoft.

Potrei aggiungere che creare un'e-mail che sia carina su tutte le e-mail è un problema. Questo sito web è stato molto carino per i test: https://putsmail.com/

Ti consente di elencare tutte le email a cui desideri inviare la tua email di prova. Puoi incollare il codice direttamente nella finestra, modificarlo, inviarlo e inviarlo di nuovo. Mi ha aiutato moltissimo.

— Trevor Nestman
fonte
Grazie, questo ha funzionato per me. Stavo cercando di
— centrare
2

In alcuni casi margin = "0 auto" non taglierà la senape quando il centro allinea un messaggio di posta elettronica html in Outlook 2007, 2010, 2013.

Prova quanto segue:

Avvolgi i tuoi contenuti in un'altra tabella con style = "table-layout: fixed;" e allinea = "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
fonte
1
Perché usare a tableper questo se ci saranno solo una riga e una colonna? Non stai facendo uso di nessuna caratteristica tabledell'elemento.
— dg99
usi una tabella nell'email html perché la soluzione a qualsiasi problema con l'email html che funzionerà su quasi tutti i client implicherà in qualche modo "aggiungere un'altra tabella"
— user254694
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.