表格单元格中的图片未对齐相邻单元格答案

【问题标题】：Picture In Table Cell Does Not Align Adjacent Cell表格单元格中的图片未对齐相邻单元格
【发布时间】：2014-01-10 16:03:23
【问题描述】：

在使用切片工具从 Photoshop 导出后，我将 PDF 传单转换为 HTML。在将它导入 Dreamweaver 时，我只是调整了一些细节。结构没有改变。但是，我遇到了图像问题。我不知道是什么阻止了单元格中的图片与相邻单元格对齐。

http://jsfiddle.net/hbM9P/

有问题的单元格如下：

<td>
 <img src="http://www.utb.edu/em/PublishingImages/2014/previewDay_emailFlyer02_06.jpg" width="302" alt="" style="display:block;">
</td>

顺便说一句，我使用内联CSS 的原因是因为我将其作为HTML 电子邮件和there are issues when dealing with this 发送。

【问题讨论】：

标签： html css html-table html-email inline

【解决方案1】：

将vertical-align:top 添加到该行：

<tr style="vertical-align:top">
    ...
    <td>
        <img src="http://www.utb.edu/em/PublishingImages/2014/previewDay_emailFlyer02_06.jpg" width="302" alt="" style="display:block;">
    </td>
</tr>

jsFiddle example

【讨论】：

您将其添加到表格单元格中，而不是整行。
大部分...但您也错过了其他东西...请注意，在小提琴中，底部几乎对齐，但不完全...
@Phlume - 检查更新的答案和小提琴。将垂直对齐放在行与单元格上可以解决所有问题。
我现在看到了。谢谢。
@Phlume 谢谢你们！做到了。现在，将代码导入 Outlook（桌面客户端）时遇到问题。它仍然在弄乱代码。 i.stack.imgur.com/unyZN.jpg

【解决方案2】：

其实……有两个问题。

前面提到的vertical-align:top[谢谢j08691]

而且，该图像元素缺少style="display:block;

http://jsfiddle.net/hbM9P/3/

这段代码：

<td rowspan="2">
        <img src="http://www.utb.edu/em/PublishingImages/2014/previewDay_emailFlyer02_05.jpg" width="24" height="573" alt=""></td>

应该是：

<td rowspan="2">
        <img src="http://www.utb.edu/em/PublishingImages/2014/previewDay_emailFlyer02_05.jpg" width="24" height="573" alt="" style="display:block;></td>

【讨论】：

【解决方案3】：

为了获得更好的跨客户端 html 电子邮件支持，您实际上应该在 <td> 中使用 html 的 valign="top"，而不是其他答案中建议的 CSS vertical-align。

vertical-align is unsupported 在 Outlook '07、'10 和 '13 中

【讨论】：

将代码导入 Outlook 2013 时仍然无法正确呈现 --- <tr valign="top"> <td rowspan="2"> <img src="http://www.utb.edu/em/PublishingImages/2014/previewDay_emailFlyer02_02.jpg" width="64" height="573" alt="" style="display:block;"></td> ...</tr> 请参阅 i.stack.imgur.com/unyZN.jpg
好点@John。让人想知道...... MS 是否曾经创建过任何不需要某种命中修复或编辑以使其在没有帮助的情况下自行呈现的东西哈哈。
我最终将emailFlyer02_06.jpg 和它下面的文字组合成一张图片。这个简单的转换变成了一项令人沮丧的任务。 Gmail 确实在移动设备和台式机上都正确呈现了它，但由于某种原因在我的计算机上它仍然与同事的计算机相比存在问题。我们在测试时都使用了相同的浏览器。
@Phlume 不，这取决于你的背景。如果你有网络背景，那就更难了，因为你对应该做什么有先入之见。如果您将 html 电子邮件视为一种新的编程语言，那就不那么令人沮丧了。
@JoeMorales 您需要将valign="top" 放在<td> 标记中，而不是<tr> 标记中。在 html 电子邮件中，您永远不需要在 <tr> 标签中添加任何内容。