The vertical alignment of the text in the perspective is not centered [with images]

Question

I'm currently trying to deal with some problems with html-mail, which can be viewed perfectly in browsers and through gmail, but, unfortunately, I am having problems with the appearance of vertically aligning text (it adheres to the bottom).

This image shows you what is 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 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 height in <td> so that the text is vertically centered:

 <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 that you need height="" or width="" set the same <td> element.

Answer 2

For me it is important to specify height and align="center" as HTML properties and duplicate height in the CSS style element.

 <td colspan="3" align="center" height="80px" width="100%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color:#666666; height: 80px; background: #cccccc; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> <strong>for internal use</strong> </td> 

The alignment problem was noticed for all Outlook based on Word (2007 - 2016).