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

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?

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

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>

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.

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)

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

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

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>