CODEWITHSUNDEEP
htmlcssemailoutlookhtml-email
Don Rhummy
Don Rhummy

Reputation: 25810

Why is this HTML code not vertically aligning in the middle in Outlook (HTML Email)?

  <table width="378" border="0" cellpadding="0" cellspacing="0">
        <tbody>
              <tr>
                    <td height="30" width="50" bgcolor="#e8e8e8">&nbsp;&nbsp;&nbsp;</td>
                    <td style="color: #ffffff; font-weight: bold; font-family: serif; font-size: 14px; padding-top: 0px; padding-bottom: 0px;" height="30" valign="middle" width="300" align="left" bgcolor="#00aec7">This should vertically center!</td>
              </tr>
        </tbody>
  </table>

In Gmail this is centered but in Outlook, it's at the top of the colored bar. I also tried using line-height and vertical-align but the vertical-align does not work and line-height has to be put to a smaller size than it should be (20px seems to center it despite the TD being 30px tall) which then makes it top aligned in GMail!

Upvotes: 0

Views: 3404

Answers (2)

user2958788
user2958788

Reputation:

Am I correct in thinking you're trying to vertically align the text? In my test I increased the height of the first cell and added a line-height of the same height (to show it in Outlook) to properly test this and it's working fine for me...

You can see my Email on Acid test here: https://www.emailonacid.com/beta/acidtest/display/summary/s5uj5kkuZ6hdiYqCJpi2BgMA4zPCekmlukAfzgPSuF9rJ/shared

It's working in Gmail.com, outlook.com, Outlook 2003-2013 and on mobile. Can you provide screenshots of your issue?

Upvotes: 0

Don Rhummy
Don Rhummy

Reputation: 25810

Wrapping the text in a paragraph and span tag and giving those a line height of 100% is the only change that fixed it. Outlook replaces all the HTML with its own interpretation of what it thinks is "correct" and a representation of the original code (determined this change by viewing the message source).

<p style="height: 30px; line-height: 100%; margin: 0px; padding: 0px; font-size: 14px;"><span style="margin: 0px; padding: 0px; font-size: 14px;">This should vertically center!</span></p>

Using a line-height with a "px", "pt" or "em" did not work. Only "100%" works.

Upvotes: 3

Related Questions