center align email in outlook.com

I have created a very simple html email. http://staging.xhtml-lab.com/mailtest/

It's working fine in all email clients, except in hotmail.com/outlook.com

in hotmail email is left aligned, it should remain center aligned.

I have added following code as suggested by emailology.org, but it have no effect.

<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>

Any suggestions for what else i can do to make the email center aligned?

This should give you a centered e-mail:

<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>

The center-tag is what is required by Outlook and outlook.com. Other clients use the margin attribute. In some clients, text is centered after the center-tag, and therefore the text-align attribute is required.

If you want the width to be variable depending on the screen size, use the following code:

<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 does not support max-width, and therefore the size is fixed to 640px for Outlook. For all other clients, the width of the e-mail will be the same as that of the viewing window, but maximum 800px.

Please let me know if you find a client where these solutions does not work, so that we can find a solution that works with as many clients as possible.

Here is one I've built that I use as the starting point for all my emails. It works 100% on all major email clients:

<!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>

It has a built in white background for when someone forwards the email on (they can type on white, while the background for the html designed part remains colored). Also the main panel is set with a bgcolor because Outlook puts gaps between tables when it is forwarded.

Hope that helps.

You can also center your email template by adding align="center"to your main table tag:

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

center align email in outlook.com

Related

Recent Posts