web-dev-qa-db-fra.com

Quel est le meilleur moyen de centrer le contenu de votre courrier électronique HTML dans la fenêtre du navigateur (ou dans le volet de prévisualisation du client de messagerie)?

J'utilise normalement les règles CSS pour margin:0 auto avec un conteneur 960 pour mon contenu standard basé sur un navigateur, mais la création d’e-mails au format HTML est nouvelle pour moi.

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

Je semble me souvenir avoir vu quelque part que cela peut également être accompli en enveloppant la conception de votre table de courrier électronique dans une table externe définie sur width:100% et en utilisant 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 pour cela?

html-emailcss-tables
78
Joel Glovier

Alignez la table au centre.

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

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

188
Shadi Almosri

Pour les googleurs et le souci de l'exhaustivité:

Voici une référence que j'utilise toujours lorsque j'ai besoin de mettre en œuvre l'implémentation de modèles de courrier électronique ou de signatures HTML: http://www.campaignmonitor.com/css/

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

Pour le centrage, n'hésitez pas à utiliser simplement CSS (l'attribut align étant 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>
27
Justus Romijn

table align = "center" ... cela aligne le centre de la page sur le tableau.

Utiliser td align = "center" centre le contenu à l'intérieur de td, utile pour le texte centré mais vous rencontrerez des problèmes avec certains clients de messagerie centrant le contenu dans des tables de sous-niveau. Vous pouvez donc utiliser td align comme méthode de centrage de votre "conteneur" de niveau supérieur. tableau sur la page n'est pas la façon de le faire. Utilisez table align à la place.

Utilisez toujours votre table 100% wrapper aussi, uniquement comme une enveloppe pour le corps, car certains clients de messagerie n’affichent pas les couleurs de fond du corps, mais il le montrera avec la table 100%, ajoutez donc la couleur de votre corps au corps et aux 100 % table.

Je pourrais continuer encore et encore pendant des années à propos de toutes les bizarreries de dev html email. Tout ce que je peux dire, c'est test test et test à nouveau. Litmus.com est un excellent outil pour tester les emails.

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

J'espère que cela t'aides.

9
user1673115

CSS dans les emails est une douleur. Malheureusement, vous aurez probablement besoin de tables car CSS n’est pas très largement supporté par tous les clients de messagerie.

Ceci dit, utilisez un DOCTYPE HTML de transition, pas XHTML, et utilisez <center>.

6
Seb

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, cela semble un peu brouillon, mais cela fonctionne même avec la nouvelle mise à jour de Firefox pour Yahoo mail. (ne centre pas l'email car remplace la table principale par un div)

5
user3408238

Je me débattais avec Outlook et Office365. Étonnamment, ce 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 quelques-uns des éléments clés qui ont résolu mes problèmes de messagerie Microsoft.

Puis-je ajouter que la construction d'un email qui a l'air bien sur tous les emails est une douleur. Ce site était super pour les tests: https://putsmail.com/

Il vous permet de répertorier tous les courriers électroniques auxquels vous souhaitez envoyer votre courrier électronique test. Vous pouvez coller votre code directement dans la fenêtre, éditer, envoyer et renvoyer. Cela m'a aidé une tonne.

4
Trevor Nestman

Dans certains cas, margin = "0 auto" ne coupe pas la moutarde lors de l'alignement central d'un courrier électronique HTML dans Outlook 2007, 2010, 2013.

Essayez ce qui suit:

Enveloppez votre contenu dans une autre table 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>
2
Anas