html - 表格单元格内的垂直间距相等

标签 html css html-email

我正在设计一个 html 电子邮件。我在顶部和底部有一张图片和一段。这 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 个没有垂直对齐。如何让它们在垂直方向上以相等的间距对齐?

最佳答案

这样就可以正常工作了:

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

关于html - 表格单元格内的垂直间距相等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11346801/

相关文章:

css - 如何确保我的电子邮件设计在浅色和深色模式设置中保持一致?

php - 从数据库中下拉搜索,获取不同型号/品牌的图像并显示

css - 如何使用 box-shadow 制作 css 动画

javascript - 提示并等待响应

html - 更改样式输出以使其不带下划线

html - 媒体查询的绝对定位

html - 如何修复 Outlook 2016 中的 HTML 格式

css - 如何删除 HTML 电子邮件中图像上方的空白区域?

javascript - <option ng-repeat value={{object}}> 我如何强制 Angular 将对象插入模型?

javascript - Internet Explorer 和 Firefox 将内联 CSS 转换为奇怪的东西