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

时间:2013-11-14 14:42:58

标签: html css outlook html-table html-email

我目前正试图解决一些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>

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

2 个答案:

答案 0 :(得分:11)

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>

答案 1 :(得分:0)

要让我发挥作用,重要的是将heightalign="center"指定为HTML属性,并在CSS height元素中复制style

	

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

所有基于Word的Outlook(2007年至2016年)都出现了对齐问题。