Quelle est la meilleure façon de centrer le contenu de votre e-mail HTML dans la fenêtre du navigateur (ou dans le volet d'aperçu du client de messagerie)?

93

J'utilise normalement des règles CSS margin:0 autoavec un conteneur 960 pour mon contenu basé sur un navigateur standard, mais je suis nouveau dans la création d'e-mails HTML et j'ai la conception suivante que j'aimerais maintenant centrer dans la fenêtre du navigateur sans CSS standard .

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

Je semble me souvenir d'avoir vu quelque part que cela peut également être accompli en enveloppant la conception de votre table de courrier électronique dans une table extérieure width:100%et en utilisant un style en ligne pour text-align:centerle corps ou quelque chose comme ça pour le faire?

Existe-t-il une meilleure pratique pour cela?

html-email  css-tables 
— Joël Glovier
source
2
"margin: 0px auto" .. juste pour info, quand vous utilisez 0quoi que ce soit, vous n'avez pas besoin de spécifier une unité :)
— Matt

Réponses:

212

Alignez la table au centre.

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

Là où vous avez "votre contenu" s'il s'agit d'un tableau, réglez-le à la largeur souhaitée et vous aurez un contenu centré.

— Shadi Almosri
source
Existe-t-il une propriété CSS qui fait la même chose? text-align: centerne fait pas la même chose.
— Kevin Ghadyani
1
Certains fournisseurs de messagerie exigent cette méthode obsolète de centrage des objets. (Je pense à Apple Mail).
— Drazzah
84
Lorsque vous codez pour des mises en page de courrier électronique, vous codez littéralement comme si c'était 1999.
— Captain Hypertext
Cela provoque également des tables enfants centrées tddans Outlook Web App (OWA), que l'alignement soit défini sur leftou non.
— Ishmael
30

Pour les googleurs et pour un souci d'exhaustivité:

Voici une référence que j'utilise toujours lorsque je dois passer par la douleur de l'implémentation de modèles d'e-mails ou de signatures HTML: http://www.campaignmonitor.com/css/

C'est une liste de support CSS pour la plupart, sinon la totalité, des options CSS, bien comparées entre certains des clients de messagerie les plus utilisés.

Pour le centrage, n'hésitez pas à utiliser simplement CSS (car l' alignattribut est obsolète dans 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
source
6
Ne fonctionne pas si vous centrez une table ou un autre élément au niveau du bloc.
— Roman
Vous avez raison, je ne sais pas si margin: 0 auto;est pris en charge (en combinaison avec a width), mais cela fonctionne généralement pour les navigateurs, mais je ne suis pas sûr que les clients de messagerie fonctionnent bien dans cette situation.
— Justus Romijn
2
Oui, je n'étais pas sûr que tous les navigateurs le prendraient en charge, alors j'ai opté pour la balise <center> fidèle mais obsolète.
— Roman
10

table align = "center" ... ceci aligne le centre du tableau de la page.

L'utilisation de td align = "center" centre le contenu à l'intérieur de ce td, utile pour le texte aligné centré, mais vous rencontrerez des problèmes avec certains clients de messagerie centrant le contenu dans des tableaux de sous-niveau, donc en utilisant td align comme méthode de premier niveau pour centrer votre "conteneur" tableau sur la page n'est pas la manière de le faire. Utilisez plutôt l'alignement de table.

Utilisez toujours votre table 100% wrapper également, uniquement comme un wrapper pour le corps, car certains clients de messagerie n'affiche pas les couleurs d'arrière-plan du corps, mais il l'affichera avec le tableau 100%, alors ajoutez la couleur de votre corps à la fois au corps et au 100 % table.

Je pourrais continuer encore et encore pendant des siècles sur toutes les bizarreries du développement d'e-mails html. Tout ce que je peux dire, c'est tester et tester à nouveau. Litmus.com est un excellent outil pour tester les e-mails.

Plus vous en faites, plus vous en apprendrez sur ce qui fonctionne dans quels clients de messagerie.

J'espère que cela t'aides.

7

Voici votre solution pare-balles:

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

Essayez-le, cela semble un peu compliqué, mais cela fonctionne même avec la nouvelle mise à jour de Firefox pour la messagerie Yahoo. (ne centre pas l'e-mail car remplace la table principale par un div)

— user3408238
source
1
La petite "période" invisible devrait être remplacée par peut-être un & nbsp; et les instructions pour rendre invisible la petite période invisible devraient être abandonnées. Je n'ai même pas pu me faire parvenir un e-mail de test avec ces paramètres car ils sont allés directement à l'enfer du spam de mes fournisseurs :) Les défenses contre les logiciels malveillants rendent tout ce qui a une odeur de poisson encore plus pêcheur ... par exemple: `<td width =" 33% "align = "center" valign = "top"> & nbsp; </td> `
— Techmag
6

CSS dans les e-mails est une douleur. Vous aurez probablement besoin de tableaux malheureusement, car CSS n'est pas très pris en charge dans tous les clients de messagerie.

Cela dit, utilisez un DOCTYPE de transition HTML, et non XHTML, et utilisez <center>.

— Seb
source
5

J'avais du mal avec Outlook et Office365. Étonnamment, la chose qui semblait fonctionner était:

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

Je n'ai répertorié que certaines des principales choses qui ont résolu mes problèmes de messagerie Microsoft.

Puis-je ajouter que la création d'un e-mail qui a l'air bien sur tous les e-mails est une douleur. Ce site Web était super sympa pour les tests: https://putsmail.com/

Il vous permet de répertorier tous les e-mails auxquels vous souhaitez envoyer votre e-mail de test. Vous pouvez coller votre code directement dans la fenêtre, modifier, envoyer et renvoyer. Cela m'a beaucoup aidé.

— Trevor Nestman
source
Merci, cela a fonctionné pour moi. J'ai essayé de centrer le modèle de courrier électronique i créé en utilisant l' éditeur dans Outlook
— anandhu
2

Dans certains cas, margin = "0 auto" ne coupera pas la moutarde lors de l'alignement au centre d'un e-mail html dans Outlook 2007, 2010, 2013.

Essayez ce qui suit:

Enveloppez votre contenu dans un autre tableau avec style = "table-layout: fixed;" et 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
source
1
Pourquoi utiliser un tablepour cela s'il n'y aura qu'une ligne et une colonne? Vous n'utilisez aucune fonctionnalité de l' tableélément.
— dg99
vous utilisez une table dans un e-mail html, car la solution à tout problème d'e-mail html qui fonctionnera sur presque tous les clients impliquera en quelque sorte «d'ajouter une autre table»
— user254694
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.