Quelle est la meilleure façon au centre de vos e-mails HTML contenu dans la fenêtre du navigateur (ou le client de messagerie le volet d'aperçu)?
J'utilise normalement des règles CSS pour margin:0 auto
avec une 960 conteneur pour mon navigateur standard en fonction du contenu, mais je suis nouveau sur e-mail en HTML création et j'ai le dessin suivant que je voudrais maintenant centre dans la fenêtre du navigateur, sans CSS standard.
http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html
Il me semble voir quelque part qu'il peut également être accomplie par d'emballage de votre e-mail de conception de table dans une table externe définie à width:100%
et l'aide de certains de style en ligne pour text-align:center
sur la tbody ou quelque chose comme cela pour le faire?
Est la meilleure pratique pour cela?
- "margin:0px auto" .. juste pour info, lorsque vous utilisez
0
de quoi que ce soit, vous n'avez pas besoin de spécifier l'unité 🙂
Vous devez vous connecter pour publier un commentaire.
Aligner la table au centre.
Où vous avez "votre contenu" si c'est une table, réglez-le à la largeur souhaitée et vous aurez centrée sur le contenu.
text-align: center
n'est pas de faire la même chose.td
s ainsi dans Outlook Web App (OWA), peu importe si elles ont l'alignement défini àleft
ou pas.Pour les googlers et l'exhaustivité souci:
Voici une référence je l'utilise toujours quand j'ai besoin de passer par la douleur de la mise en œuvre de l'email html-templates ou des signatures:
http://www.campaignmonitor.com/css/
Je pas faire une liste de prise en charge de CSS pour la plupart, si pas tous, CSS options, joliment comparaison entre certains des plus utilisés clients de messagerie.
Pour le centrage, n'hésitez pas à l'utiliser CSS (comme le
align
attribut est obsolète dansHTML 4.01
).margin: 0 auto;
est pris en charge (en combinaison avec unwidth
), mais qui travaille habituellement pour les navigateurs, mais je ne suis pas sûr si l'e-mail-les clients viennent bien dans cette situation.table align="center" ... cela permet d'aligner le centre de la table de page.
À l'aide de td align="center" centre le contenu à l'intérieur de la td, utile pour centré le texte aligné mais vous avez des problèmes avec certains clients de messagerie centrage contenu dans le sous-niveau de tables donc, en utilisant l'aide de td align comme un haut-niveau de la méthode de centrage votre "conteneur" tableau de la page n'est pas la façon de le faire. Utilisez le tableau aligner à la place.
Toujours utiliser votre 100% wrapper table trop, purement comme un wrapper pour le corps, car certains clients de messagerie n'affichent pas de corps, les couleurs de fond, mais il va le montrer avec le 100% de la table, de sorte que l'ajouter votre couleur de corps à corps et de l'100% tableau.
Je pouvais aller sur et sur, pour les âges, sur tous les travers de l'email html dev. Tout ce que je peux dire, c'est test test et le test à nouveau. Litmus.com est un excellent outil pour tester les e-mails.
Plus vous le faites, plus vous apprendrez au sujet de ce qui fonctionne dans ce que les clients de messagerie.
Espère que cette aide.
Voici votre solution impénétrable:
Il suffit de l'Essayer, l'air un peu brouillon, mais Il fonctionne Même avec la nouvelle mise à Jour Firefox pour Yahoo mail. (ne pas le centre de l'e-mail parce que remplacer la table principale par un div)
CSS dans les e-mails est une douleur. Vous aurez probablement besoin de tables malheureusement, parce que le CSS n'est pas grandement pris en charge dans tous les clients de messagerie.
Cela dit, l'utilisation d'un code HTML de Transition DOCTYPE, pas le XHTML, et l'utilisation
<center>
.J'ai eu du mal avec Outlook et Office365. Étonnamment, la chose qui semblait travailler a:
Je ne répertorié quelques-uns des éléments clés qui a résolu mon email de Microsoft problèmes.
J'ajouterais que la construction d'un e-mail qui a l'air bien sur tous les e-mails est une douleur. Ce site internet a été super sympa pour les essais de: https://putsmail.com/
Il vous permet de lister tous les e-mails que vous souhaitez envoyer votre e-mail d'essai. Vous pouvez coller votre code de droit dans la fenêtre, modifier, envoyer, et de le renvoyer. Il m'a aidé à une tonne.
Dans certains cas, la marge="0 auto" ne sera pas couper la moutarde lorsque le centre de l'alignement des courriels au format html dans Outlook 2007, 2010, 2013.
Essayez ce qui suit:
Envelopper votre contenu dans une autre table avec style="table-layout: fixed;" et align=“center”.
table
pour cela si il n'y a qu'une ligne et une colonne? Vous n'êtes pas faire usage de toutes les caractéristiques de latable
élément.