center align email in outlook.com

Question

center align email in outlook.com

50.5k Views Asked by Alok Jain At 25 October 2012 at 09:42

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?

Original Q&A

There are 4 best solutions below

**John** · Answer 1 · 2012-11-20T16:22:00.467000

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.

**Magnar Myrtveit** · Answer 2 · 2013-08-12T11:25:29.777000

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.

**Darryl Mendonez** · Answer 3 · 2019-01-24T21:00:23.363000

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>

**Hovhannes Hakobyan** · Answer 4 · 2022-01-14T10:13:25.527000

Hovhannes Hakobyan On 14 January 2022 at 10:13

Works with GMail and Outlook

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

center align email in outlook.com

There are 4 best solutions below

Related Questions in HTML-EMAIL

Related Questions in EMAIL-CLIENT

Related Questions in HOTMAIL

Related Questions in OUTLOOK.COM

Trending Questions

Popular # Hahtags

Popular Questions