web-dev-qa-db-fra.com

center align e-mail dans Outlook.com

J'ai créé un email HTML très simple. http://staging.xhtml-lab.com/mailtest/

Cela fonctionne très bien dans tous les clients de messagerie, sauf dans hotmail.com/Outlook.com.

dans Hotmail, l'email est laissé aligné, il doit rester centré.

J'ai ajouté le code suivant comme suggéré par emailology.org, mais cela n'a aucun effet.

<style type=“text/css”>
/**This is to overwrite Hotmail’s Embedded CSS************/
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #00788a} 
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
p {margin-bottom: 0}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
/**This is to center your email in Hotmail************/
.ExternalClass {width: 100%;}
</style>

Des suggestions sur ce que je peux faire d'autre pour aligner le centre de messagerie?

html-emailemail-clienthotmailoutlook.com
15
Alok Jain

Cela devrait vous donner un e-mail centré:

<table style="width: 100%; background: red;">
  <tr>
    <td>
      <center>
        <table style="width: 640px; background: blue; margin: 0 auto; text-align: left;">
          <tr>
            <td>
              Your content here
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

La balise center- est ce qui est requis par Outlook et Outlook.com. D'autres clients utilisent l'attribut margin. Dans certains clients, le texte est centré après la balise center-, de sorte que l'attribut text-align est requis.

Si vous souhaitez que la largeur soit variable en fonction de la taille de l'écran, utilisez le code suivant:

<table style="width: 100%; background: red;">
  <tr>
    <td>
      <center>
        <!--[if mso]>
        <table style="width: 640px;"><tr><td>
        <![endif]-->
        <div style="max-width: 800px; margin: 0 auto;">
          <table style="background: blue; text-align: left;">
            <tr>
              <td>
                Your content here
              </td>
            </tr>
          </table>
        </div>
      </center>
      <!--[if mso]>
      </td></tr></table>
      <![endif]--> 
    </td>
  </tr>
</table>

Outlook ne prend pas en charge max-width; par conséquent, la taille est fixée à 640px pour Outlook. Pour tous les autres clients, la largeur de l'e-mail sera la même que celle de la fenêtre d'affichage, mais au maximum 800 pixels.

Faites-moi savoir si vous trouvez un client pour lequel ces solutions ne fonctionnent pas, afin que nous puissions trouver une solution qui fonctionne avec autant de clients que possible.

32
Magnar Myrtveit

En voici un que j'ai construit et que j'utilise comme point de départ pour tous mes courriels. Cela fonctionne à 100% sur tous les principaux clients de messagerie:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title></head>
<body style="margin: 0px; padding: 0px background-color: #FFFFFF;" bgcolor="#FFFFFF"><!-- << bg color for forwarding (leave white) // main bg color >> --><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td>
<!-- CENTER FLOAT WIDTH -->
<table width="600" border="0" valign="top" align="center" cellpadding="0" cellspacing="0"><tr><td><!-- Master Width of the center panel -->
preheader...
<!-- CENTER PANEL BG COLOR (to hide separation of tables on email forward from Outlook (known issue) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td><!-- Master Color of the center panel -->

content...

<!-- /CENTER BG COLOR -->
</td></tr></table>

<!-- /CENTER FLOAT WIDTH -->
</td></tr></table>
<!-- /CENTER FLOAT -->
</td></tr></table></body></html>

Son arrière-plan blanc est intégré lorsque quelqu'un transfère l'e-mail (ils peuvent taper en blanc, tandis que l'arrière-plan de la partie conçue en HTML reste coloré). De plus, le panneau principal est défini avec une couleur bg car Outlook met des espaces entre les tables lors de son transfert.

J'espère que cela pourra aider. 

3
John

Vous pouvez également centrer votre modèle de courrier électronique en ajoutant align="center" à votre balise de table principale:

    <body>
      <table align="center">
        <tr>
          <td style="width:600px;">
            <!-- content -->
          </td>
        </tr>
      </table>
   </body>
0
Darryl Mendonez