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 de prévisualisation du client de messagerie) ?

Question

J'utilise normalement des règles CSS pour margin:0 auto avec un conteneur 960 pour mon contenu standard basé sur le navigateur, mais je suis nouveau dans la création d'emails HTML et j'ai le design suivant 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 crois me souvenir avoir vu quelque part qu'il est également possible d'y parvenir en enveloppant la conception de votre table de courrier électronique dans une table extérieure définie comme suit width:100% et l'utilisation d'un style en ligne pour text-align:center sur le tbody ou quelque chose comme ça pour le faire ?

Existe-t-il une meilleure pratique en la matière ?

Answer 1

Les CSS dans les courriers électroniques sont une véritable plaie. Malheureusement, vous aurez probablement besoin de tableaux, car le CSS n'est pas très bien pris en charge par tous les clients de messagerie.

Cela dit, il convient d'utiliser un DOCTYPE HTML Transitional, et non XHTML, et d'utiliser <center> .

Answer 2

Pour centrer le tableau au milieu de l'e-mail, utilisez

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

Pour aligner le contenu au milieu, utilisez :

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

Answer 3

Dans certains cas, margin="0 auto" ne suffit pas pour centrer 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>