Outlook 2007/2010/2013电子邮件显示问题

Question

我遇到的问题如下图所示。在Outlook 2007,2010和2013中，左列中的图标未正确垂直对齐。我尝试使用line-height / font-size进行操作无效。

我绘制了表格单元格/行边框以说明我正在使用的结构。每个图标都有padding-top:5px，以便与右列中的文字正确对齐。

这是一行的代码：

<tr>
    <td class="icon" width="59" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px;line-height: 1em;color: #666666;padding-top: 5px;margin: 0;"><img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="display: block;border: none;"></td>

    <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">1 in 3 Australian SMBs have had their 
    data held to ransom in the last 12 months*.</td>
</tr>

有什么想法吗？

Answer 1

如果padding-top对td不起作用，请尝试将css应用于img本身。编辑你的img的css（参考下面的代码）。删除td的填充顶部。

<tr>
    <td class="icon" width="59" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px;line-height: 1em;color: #666666;"><img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="display: block;border: none;margin-top: 5px;"></td>

    <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">1 in 3 Australian SMBs have had their 
data held to ransom in the last 12 months*.</td>
</tr>

如果为img提供最高保证金仍然不起作用，请尝试使用填充或甚至边框顶部（边框宽度为5px）进行交易

Answer 2

为什么不在包含图像的表格单元格中使用valign="middle"？

<tr>
  <td class="icon" width="59" valign="middle">
    <img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="margin: 0; border: 0; padding: 0; display: block;">
  </td>
  <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.
  </td>
</tr>

更新：如果你有更多文字，这是一个例子。您的图片将保持顶部对齐。

<table width="325" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td class="icon" valign="top" width="59" valign="middle" style="padding-top:5px;">
    <img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="margin: 0; border: 0; padding: 0; display: block;">
  </td>
  <td valign="top" class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.<br>
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.<br>
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.
  </td>
</tr>
</table>