center align email in outlook.com

Question

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?

The problem may be ``. I'm sure if that is supported by all email clients, and MS outlook/hotmail is known to be particularly picky about what they support. This page may help: http://www.campaignmonitor.com/css/ — kburns, Nov 02 '12 at 15:30

score 43 · Answer 1 · answered Aug 12 '13 at 11:25

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.

The `` tag by itself solved my Hotmail/Outlook problem. – Captain Hypertext Sep 03 '15 at 20:54 — Captain Hypertext, Sep 03 '15 at 20:54

John · Answer 2 · 2015-11-06T18:42:25.043

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.

that actually helped me a lot thank you! Couldn't get email to center between outlook office 365 and outlook 2010... had the same tags you have but obviously the order yours is in is somehow different, correct and works to center an email in all clients. Thanks! — mike, Sep 09 '14 at 17:19
Hate to bear the bad news, but nothing works 100% on all email clients. — Goose, Nov 06 '15 at 15:53
@Goose. For all the major clients it does. I added "major" to the answer, as there are plenty of lesser known clients services like Litmus do not test for. — John, Nov 06 '15 at 18:47

score 1 · Answer 3 · answered Jan 24 '19 at 21:00

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>

score 0 · Answer 4 · answered Jan 14 '22 at 10:13

0

Works with GMail and Outlook

<body style="width:600px;margin: auto;">
   <!-- content -->
</body>

answered Jan 14 '22 at 10:13

Hovhannes Hakobyan

1,266
12
14

center align email in outlook.com

4 Answers4