Vertical text alignment in outlook not centering [with pictures]

Question

I'm currently trying to sort out some problems with a html email that renders fine in browsers and through gmail but unfortunately I'm having problems in outlook vertically aligning the text (it sticks to the bottom part).

This image shows you what's wrong:

<td align="center" style="font-size:17px;font-weight:bold;line-height:62px;"><a href="url" style="text-decoration:none;color:#000001;">THE WORLD'S BEST BRANDS</a></td>
</tr>

<tr>
    <td align="center"><a href="url" style="color:#000001;text-decoration:none;"><img src="url" alt="XXXX" width="593" height="100" class="brandsimage" style="display:block;border:0;" /></a></td>
</tr>
</table>                                                
</td>
</tr>

<tr>
    <td align="center" style="font-size:17px;font-weight:bold;line-height:72px;"><a href="url" style="text-decoration:none;color:#000001;">ESSENTIALS</a></td>
</tr>

Any idea how to fix this?

Answer 1

Add valign="middle" and a height to the <td> you want the text vertically centered on:

<tr>
  <td align="center" valign="middle" height="100" style="font-size:17px;font-weight:bold;line-height:72px;">
    <a href="url" style="text-decoration:none;color:#000001;">ESSENTIALS</a>
  </td>
</tr>

In html email, always use,

valign="top|middle|bottom" for vertical alignment and

align="left|center|right" for horizontal alignment.

Just remember you need height="" or width="" set on the same <td> element.