113

I normally use CSS rules for margin:0 auto along with a 960 container for my standard browser based content, but I'm new to HTML email creation and I've got the following design that I'd like to now center in the browser window without standard CSS.

http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html

I seem to recall seeing somewhere that it can also be accomplished by wrapping your email table design in an outer table set to width:100% and using some inline style for text-align:center on the tbody or something like this to do it?

Is there a best practice for this?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Joel Glovier
  • 7,469
  • 9
  • 51
  • 86
  • 2
    "margin:0px auto" .. just FYI, when you use `0` of anything, you don't need to specify a unit :) – Matt May 18 '10 at 13:44

8 Answers8

260

Align the table to center.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            Your Content
        </td>
    </tr>
</table>

Where you have "your content" if it is a table, set it to the desired width and you will have centred content.

Shadi Almosri
  • 11,678
  • 16
  • 58
  • 80
  • Is there a CSS property which does the same thing? `text-align: center` isn't doing the same thing. – Kevin Ghadyani Aug 05 '14 at 19:19
  • 1
    Some email providers require this deprecated method of centering objects. (I'm thinking of Apple Mail). – Ian Hazzard Dec 13 '14 at 22:42
  • 153
    When you code for email layouts, you literally code like it's 1999. – Captain Hypertext Aug 17 '15 at 14:33
  • This causes child tables to have centered `td`s as well in Outlook Web App (OWA), no matter if they have alignment set to `left` or not. – Ishmael Feb 12 '18 at 19:14
  • Does not work in gmail mobile. This answer below does however https://stackoverflow.com/a/38149673/129638 – Suan Aug 02 '21 at 22:19
  • Have in mind that your email is not only going to display in modern clients like Gmail. They might be received by users/businesses who use outdated and small clients and email providers. – Ramtin Mar 04 '23 at 08:21
38

For googlers and completeness sake:

Here's a reference I always use when I need to go through the pain of implementing html email-templates or signatures: http://www.campaignmonitor.com/css/

I'ts a list of CSS support for most, if not all, CSS options, nicely compared between some of the most used email clients.

For centering, feel free to just use CSS (as the align attribute is deprecated in HTML 4.01). 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center;">
            Your Content
        </td>
    </tr>
</table>
Justus Romijn
  • 15,699
  • 5
  • 51
  • 63
  • 8
    Doesn't work if you're centering a table or other block-level element. – Roman Sep 24 '12 at 03:23
  • You're right, I'm not sure if `margin: 0 auto;` is supported (in combination with a `width`), but that usually works for browsers, but I'm not sure if email-clients come along well in that situation. – Justus Romijn Oct 02 '12 at 09:38
  • 2
    Yeah I wasn't sure if all browsers would support it so went with the trusty but deprecated
    tag.
     – Roman Oct 02 '12 at 18:36
16

table align="center" ... this aligns the table center of page.

Using td align="center" centers the content inside that td, useful for centered aligned text but you will have issues with some email clients centering content in sub level tables so using using td align as a top level method of centering your "container" table on the page is not the way to do it. Use table align instead.

Still use your 100% wrapper table too, purely as a wrapper for the body, as some email clients don't display body background colors but it will show it with the 100% table, so add your body color to both body and the 100% table.

I could go on and on for ages about all the quirks of html email dev. All I can say is test test and test again. Litmus.com is a great tool for testing emails.

The more you do the more you will learn about what works in what email clients.

Hope this helps.

14

I was struggling with Outlook and Office365. Surprisingly the thing that seemed to work was:

<table align='center' style='text-align:center'>
  <tr>
    <td align='center' style='text-align:center'>
      <!-- AMAZING CONTENT! -->
    </td>
  </tr>
</table>

I only listed some of the key things that resolved my Microsoft email issues.

Might I add that building an email that looks nice on all emails is a pain. This website was super nice for testing: https://putsmail.com/

It allows you to list all the emails you'd like to send your test email to. You can paste your code right into the window, edit, send, and resend. It helped me a ton.

Trevor Nestman
  • 2,456
  • 19
  • 26
  • Thank you, this worked for me. I was trying to Center the email template i created using publisher in outlook – anandhu Oct 14 '20 at 17:15
13

Here's your bulletproof solution:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
    <td width="35%" align="center" valign="top">
      CONTENT GOES HERE
    </td>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
  </tr>
</table>

Just Try it out, Looks a bit messy, but It works Even with the new Firefox Update for Yahoo mail. (doesn't center the email because replace the main table by a div)

Jonas Schubert Erlandsson
  • 3,910
  • 1
  • 24
  • 37
user3408238
  • 139
  • 1
  • 2
  • 1
    The small invisible "period" should be replaced with perhaps a   and the instructions to make the small invisible period invisible should be dropped. I couldn't even get a test email through to myself with those settings as they went straight to my providers spam hell :) Malware defences are making anything fishy smell even fishier... e.g.: `   ` – Techmag May 26 '16 at 15:55
7

CSS in emails is a pain. You'll probably need tables unfortunately, because CSS is not greatly supported in all email clients.

That said, use an HTML Transitional DOCTYPE, not XHTML, and use <center>.

Seb
  • 24,920
  • 5
  • 67
  • 85
6

To center the table in the middle of the email use

<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            Your Content
        </td>
    </tr>
</table>

To align the content in the middle use:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            Your Content
        </td>
    </tr>
</table>
Enrico
  • 2,734
  • 1
  • 27
  • 40
2

In some cases margin="0 auto" won't cut the mustard when center aligning a html email in Outlook 2007, 2010, 2013.

Try the following:

Wrap your content in another table with style="table-layout: fixed;" and align=“center”.

<!-- WRAPPING TABLE -->
<table cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;" align="center">
  <tr>
    <td>
      <!-- YOUR TABLES AND EMAIL CONTENT GOES HERE -->
    </td>
  </tr>
</table>
Anas
  • 1,345
  • 14
  • 15
  • 1
    Why use a `table` for this if there's only going to be one row and one column? You're not making use of any features of the `table` element. – dg99 Apr 02 '15 at 17:14
  • 1
    you use a table in html email because the solution to any problem with html email that will work across almost all clients will somehow involve "add another table" – user254694 Nov 18 '19 at 11:41