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

Aligner le tableau au centre.

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

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

Answer 2

Par souci de transparence et d'exhaustivité :

Voici une référence que j'utilise toujours lorsque j'ai besoin d'implémenter des modèles d'emails ou des signatures en html : http://www.campaignmonitor.com/css/

J'ai dressé une liste de la prise en charge de la plupart, voire de la totalité, des options CSS, joliment comparée à celle de certains des clients de messagerie les plus utilisés.

Pour le centrage, n'hésitez pas à utiliser CSS (comme l'indique la balise align 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>

Answer 3

Table align="center" ... aligne le tableau au centre de la page.

L'utilisation de td align="center" permet de centrer le contenu à l'intérieur de ce td, ce qui est utile pour centrer le texte, mais vous aurez des problèmes avec certains clients de messagerie qui centrent le contenu des tableaux de sous-niveau. L'utilisation de td align comme méthode de premier niveau pour centrer votre tableau "conteneur" sur la page n'est donc pas la bonne méthode. Utilisez plutôt l'alignement de tableau.

Utilisez toujours votre tableau de recouvrement à 100 %, uniquement comme recouvrement du corps, car certains clients de messagerie n'affichent pas les couleurs d'arrière-plan du corps, alors qu'ils les afficheront avec le tableau à 100 %, donc ajoutez votre couleur de corps à la fois au corps et au tableau à 100 %.

Je pourrais continuer à parler pendant des heures de toutes les bizarreries du développement des courriels en html. Tout ce que je peux dire, c'est qu'il faut tester, tester et tester encore. Litmus.com est un excellent outil pour tester les e-mails.

Plus vous le ferez, plus vous apprendrez ce qui fonctionne avec tel ou tel client de messagerie.

J'espère que cela vous aidera.

Answer 4

Voici une solution à toute épreuve :

<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, il a l'air un peu désordonné, mais il fonctionne même avec la nouvelle mise à jour de Firefox pour Yahoo mail. (ne centre pas l'email car la table principale est remplacée par une div)

Answer 5

Je me débattais 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 énuméré que quelques-uns des éléments clés qui ont permis de résoudre mes problèmes de messagerie Microsoft.

Je me permets d'ajouter que la création d'un message électronique qui soit agréable à lire sur tous les courriels est une tâche ardue. Ce site web était super sympa pour les tests : https://putsmail.com/

Il vous permet de dresser la liste de tous les courriels auxquels vous souhaitez envoyer votre courriel de test. Vous pouvez coller votre code directement dans la fenêtre, le modifier, l'envoyer et le renvoyer. Cela m'a beaucoup aidé.