表格单元格内的相等垂直间距答案

【问题标题】：equal vertical spacing within a table cell表格单元格内的相等垂直间距
【发布时间】：2012-07-06 00:04:53
【问题描述】：

我正在设计一个 html 电子邮件。我在顶部和底部有一个图像和 1 个段落。这 3 个在表格单元格中。我需要图像位于单元格的中心，并且 2 个段落应该与图像垂直等距。

<td height="200" style="vertical-align:middle;">
  <p style="vertical-align:middle;">Lorem Ipsum</p>
  <img src="pic.jpg" height="150" />
  <p style="vertical-align:middle;">Lorem Ipsum</p>
</td>

现在 3 没有垂直对齐。如何让它们在垂直方向上以相等的间距对齐？

【问题讨论】：

标签： html css html-email

【解决方案1】：

这样可以正常工作：

<style>
    td {
        vertical-align:middle;
    }
</style>

还有 HTML：

<table>
    <tr>
        <td>
            <p>Lorem Ipsum</p>
        </td>
        <td>
            <img src="http://lorempixel.com/output/food-h-c-100-200-8.jpg" alt="">
        </td>
        <td>
            <p>Lorem Ipsum</p>
        </td>
    </tr>
</table>

【讨论】：