Quelle est la meilleure façon de centrer votre contenu de messagerie HTML dans la fenêtre du navigateur (ou le volet de prévisualisation du client de messagerie)?

J’utilise normalement les règles CSS pour la margin:0 auto avec un conteneur 960 pour mon contenu standard basé sur un navigateur, mais je suis nouveau dans la création de courrier électronique HTML et j’ai la conception suivante que je voudrais maintenant centrer dans le navigateur fenêtre sans CSS standard.

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

Je me souviens avoir vu quelque part que cela pouvait aussi être fait en encapsulant la table de vos courriers électroniques dans une table externe de width:100% et en utilisant un style en ligne pour text-align:center centrez-vous sur

Y a-t-il une meilleure pratique pour cela?

Alignez la table au centre.

 
Your Content

Si vous avez “votre contenu” s’il s’agit d’un tableau, définissez-le sur la largeur souhaitée et vous aurez un contenu centré.

Pour les googleurs et la complétude

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

C’est une liste de prise en charge CSS pour la plupart des options CSS, si ce n’est toutes, comparée à certains des clients de messagerie les plus utilisés.

Pour centrer, n’hésitez pas à utiliser CSS (car l’atsortingbut align est obsolète dans HTML 4.01 ).

 
Your Content

table align = “center” … cela aligne le centre de la table.

Utiliser td align = “center” centre le contenu à l’intérieur de ce td, utile pour le texte aligné aligné mais vous rencontrerez des problèmes avec certains clients de messagerie centrant le contenu dans les tables de sous-niveau en utilisant td align comme méthode de centrage tableau sur la page n’est pas la façon de le faire. Utilisez le tableau à la place.

Utilisez toujours votre table de wrapper 100%, uniquement comme enveloppe pour le corps, car certains clients de messagerie n’affichent pas les couleurs d’arrière-plan du corps, mais l’afficheront avec le tableau à 100%. % table.

Je pourrais continuer encore et encore pendant des siècles à propos de toutes les bizarreries du développement de messagerie HTML. Tout ce que je peux dire, c’est tester et tester à nouveau. Litmus.com est un excellent outil pour tester les emails.

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

J’espère que cela t’aides.

CSS dans les emails est une douleur. Vous aurez probablement besoin de tables, car CSS n’est pas très pris en charge par tous les clients de messagerie.

Cela dit, utilisez un HTML Transitional DOCTYPE, pas XHTML, et utilisez

.

Voici votre solution pare-balles:

 
. CONTENT GOES HERE .

Essayez-le, semble un peu désordonné, mais ça marche Même avec la nouvelle mise à jour de Firefox pour Yahoo mail. (ne centre pas le courrier électronique car remplacer la table principale par un div)

Je me débattais avec Outlook et Office365. Étonnamment, la chose qui semblait fonctionner était:

 

Je n’ai répertorié que certains des éléments clés qui ont résolu mes problèmes de messagerie Microsoft.

Puis-je append que la création d’un email qui a l’air sympa sur tous les emails est une douleur. Ce site é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, éditer, envoyer et renvoyer. Cela m’a aidé d’une tonne.

Dans certains cas, margin = “0 auto” ne coupe pas la moutarde lors de l’alignement d’un email HTML dans Outlook 2007, 2010, 2013.

Essayez ce qui suit:

Enveloppez votre contenu dans une autre table avec style = “table-layout: fixed;” et align = “centre”.