前景中的垂直文本对齐不以[与图片]为中心

Question

我目前正试图解决一些html电子邮件的问题,这些问题在浏览器和gmail中呈现良好,但不幸的是我在Outlook中有问题垂直对齐文本(它坚持到底部).

这张图片显示了什么是错的:

<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>

知道如何解决这个问题吗？

Answer 1

添加valign="middle"和<td>您希望文本垂直居中的高度:

<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>

在html电子邮件中,总是使用,

valign="top|middle|bottom" 用于垂直对齐和

align="left|center|right" 用于水平对齐.

只记得你需要height=""或width=""设置相同的<td>元素.