Valign not working in Outlook HTML Emails

Question

So I've been wrangling all week with a newsletter redesign for my company, tweaking the html to make it display semi-consistently across email clients. I've made good use of www.litmus.com for much of this. This is the last bug remaining and it continues to elude me. We have a horizontal navbar across the top. Here's a stripped down version with only one <td>, normally there are 5 of them:

<table width="100%" border="0" align="right" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" valign="middle">
    <tr valign="middle">
        <td valign="middle" align="center" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase;" >&nbsp;
            <a target="_blank" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase; text-decoration:none; vertical-align: middle;" href="LinkURLHere">
                <span style="color:#FFFFFF; vertical-align: middle;">Link Text Here</span>
            </a>&nbsp;
        </td>
    </tr>
</table>

As you can see, inline styles up the wazoo. It displays fine on all of the litmus tests except for Outlook 2002, 2007 and 2013, in which valign="middle" gets ignored and the link text gets pushed to the top like this: https://i.stack.imgur.com/KrPjq.jpg

Several sources, both here and elsewhere, suggest that valign works in outlook, but I've tried the valign="middle" attribute on every tag I can think of, and several css vertical-align: middle;s as well. Is this no longer true? And if so, is there a work around of some sort?

Answer 1

I think the issue is the line-height you are setting. I found that when the line-height is equal to the td height, valign=middle will not work properly in outlook.

The following will not middle-align the text:

<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
    <tr>
        <td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:48px;">
            Link Text Here
        </td>
    </tr>
</table>

THIS WILL:

<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
    <tr>
        <td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:24px;">
            Link Text Here
        </td>
    </tr>
</table>

Answer 2

Valign always worked for me, but I think for it to work in Outlook 2007 you have to set the height of your <td>. This always worked for me:

<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
    <tr>
        <td align="center" valign="middle" bgcolor="#b2382a" height="35">
            <span style="color:#FFFFFF; 
                         font-family: 'Lucida Grande', Arial, sans-serif;
                         font-size:12px;
                         text-transform:uppercase;">
                Link Text Here
            </span>
        </td>
    </tr>
</table>

Answer 3

Short answer: Use padding-top, and padding-bottom with a negative value.

Long answer: If you want to write a cross-compatible email don't use valign at all. The problem you're having is stemming from somewhere else because by default the text should be displaying vertically centered in the cell.

Get your code back to a point where it's defaulting to the center and wherever you need something different use nested tables, cellpadding, margin, and padding to get the placement you're looking for.

Answer 4

I have this:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="600" valign="middle">
        Content
    </td>
  </tr>
</table>

This works on most of email clients, but not on Outlook version greater than 2010. To make it work correctly just add a conditional comment with a spacer like this:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <!-- In this case is a spacer of 40px -->
  <!--[if (gt mso 14)]>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="font-size: 40px; line-height: 40px;" bgcolor="#ffffff" width="100%" height="40" valign="top">
            &nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <![endif]-->
  <tr>
    <td width="600" valign="middle">
        Content
    </td>
  </tr>
</table>

Answer 5

This is because of the align="right" set on the first table. Removing this should fix the issue. Other option is to manually add spacing before the first <tr>.

<tr><td height="30>&nbsp;</td></tr>