1

I am integrating an e-mail and it is tearing my hair out! My e-mail has a centered layout (I am currently using Ink's hero template). The problem is that my layout is not centered in Outlook Web app because this client does not support margin (so I cannot center my layout with margin: 0 auto;).

Here is a sample of my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width"/>
  </head>
  <body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td class="header" valign="top" align="center">
          <table class="container" width="580" border="0" cellpadding="0" cellspacing="0" align="center">
            <tr>
              <td class="wrapper last" valign="top" style="padding-top:10px;">
                <img src="http://www.numeezy.com/img/numeezy-header.png" alt="Numeezy, l'hébergement professionel haute performance"/>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td valign="top" align="center">
          <table class="container" width="580" align="center">
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

So, Outlook is not well rendering my e-mail because all my align="center" attributes are removed by Outlook.

<div style="width:100%;margin:0;padding:0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;width:100%;text-align:justify;padding:0;">
    <tbody>
        <tr style="padding:0;">
            <td valign="top" style="background-color:#17303E;padding:0;">
                <span style="background-color:#17303E;">
                    <table width="580" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;width:580px;text-align:justify;margin-top:0;margin-bottom:0;padding:0;">
                        <tbody>
                            <tr style="padding:0;">
                                <td valign="top" style="padding:10px 0 0 0;">
                                    <img blockedimagesrc="http://www.numeezy.com/img/numeezy-header.png" alt="Numeezy, l'hébergement professionel haute performance">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </span>
            </td>
        </tr>
        <tr style="padding:0;">
            <td valign="top" style="padding:0;">
                <table width="580" style="border-collapse:collapse;border-spacing:0;width:580px;text-align:justify;margin-top:0;margin-bottom:0;padding:0;">
                </table>
            </td>
        </tr>
    </tbody>
</table>
</div>

My table which have a width of 580px should be centered vertically. I can "emulate" it in the developer tool by removing the margin: 0; style and adding an align="center" attribute. It may be a lead!

Thank you in advance for your help!

EDIT: Edited my code with the last version

Sebj
  • 476
  • 3
  • 15
  • Instead of fiddling with such details you should invest a thought at a much lower level: html emails are one of the biggest problems today if it comes to security threads. They are evil by design. And actually, hardly ever really required. Instead send a plain text email with a link leading to a web page, 95% of all recipients will be more than happy about that fair gesture. – arkascha Apr 06 '14 at 14:29
  • @arkascha This is an interesting point of view, but it is not compatible with confidential datas without a lack of comfort (authentification on the landing page). – Sebj Apr 06 '14 at 15:51
  • How that? You want to hint at that sending confidential data as content of an email is secure? Sorry, but emails are everything but secure. Anyways, if that is your only concern, then create a link with a usage token. Access to the web page without such token is denied. There you are: elegant and less risky for the recipients. – arkascha Apr 06 '14 at 15:52
  • Haven't thought about tokens, it's a great idea. I meant by confidential that the goal of the emails we send are addressed to an unique recipient. But that's not the aim of my question, I'd like to know how to do this without avoiding the whole system. Thank you anyway for your suggestions. – Sebj Apr 06 '14 at 18:32
  • Sure, all fine. But again: keep in mind that sending confidential data in an email is _not_ secure. Reading email addressed to someone else is one of the easier challenges in the internet. – arkascha Apr 06 '14 at 18:36
  • Any updates on it? It's ridiculous! Can't center my table because align=center or css center gets striped! – mbudnik Jan 13 '15 at 17:00
  • No update, I decided to not center content on Outlook. Good luck! – Sebj Jan 14 '15 at 12:22

2 Answers2

0

Try putting align="center" on the child element (the table you are trying to align). Outlook can work slightly differently with align to other clients. It treats it like float on the element itself, while others treat it like text:align; on the parent.

Update:

You have a lot of unnecessary stuff in there. Here is a clean example:

<style>
  table td {border-collapse: collapse;}
</style>



<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="top" align="center" bgcolor="#17303E">
            <table width="580" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#330000"><!-- colored so you can see it-->
                <tr>
                    <td valign="top" style="padding-top:10px;"><!-- left aligned within centered panel -->
                        <img blockedimagesrc="..." alt="...">
                    </td>
                </tr>
                <tr>
                    <td valign="top" align="center" style="padding-top:10px;"><!-- center aligned within centered panel -->
                        <img blockedimagesrc="..." alt="...">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Here is an example basic setup to start your email with. It includes all the must have email normalization and a centered panel + independent forwarding background color.

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
  • It's the good solution (I've edited my question with the code I am currently using). But your solution works if I emulate it with developer tools. Outlook is still removing my `align="center"` on the table I am trying to center and add this attribute to the parent `` which contains my table... So I tried to add to add `align="center"` on all table children and they're also all removed by Outlook. It's driving me crazy! – Sebj Apr 09 '14 at 12:12
  • I've edited my wuestion with the example you gave and its result. I didn't tell it on my first question, but I have two table containers to center horizontally (header + body). Now, Outlook is removing again my `align` attributes, now even on the direct parent. I really don't know why. – Sebj Apr 09 '14 at 17:56
-1

<element align='center'> has also caused me trouble in the past. The way around it would be to use position: absolute; top: 50%; bottom: 50%; or something like that, in which case you would need to set your table a height/width in percentage.
You could even use margins like you mentioned: margin-top: 50%; margin-bottom: 50%.
Hope I could help.

gilbert-v
  • 1,263
  • 1
  • 11
  • 23
  • Thanks for your suggestion, but I am trying to center my table horizontally. I could have used your method with an absolute position and set a left position and a width in % but this method won't work well with small screens. – Sebj Apr 06 '14 at 15:11
  • CSS `position` is not supported in most email clients. Also, `margin` should be avoided as it is not supported in Outlook.com – John Apr 09 '14 at 18:51
  • Really? Thanks, I didn't know that - I'm not really very informed on this front. @John – gilbert-v Apr 10 '14 at 12:03