如何在 td 和 span 中垂直对齐文本？答案

【问题标题】：How do I vertically align text within a td and a span?如何在 td 和 span 中垂直对齐文本？
【发布时间】：2012-08-24 15:36:46
【问题描述】：

这就是我所拥有的，唯一的 CSS 是我的标签的样式，所以没有相关的 CSS 影响这一点。

<tr>
    <td colspan="2" valign="top"><span style="font-size:20px; color:#ed8f49">Fall Classes with</span><img src="REDACTED.png" height="90" width="482"></td>
</tr>

当我只有 TD 时，一切正常，但只要我将该文本放在一个 span 中或尝试使其成为 h1，它就会与底部对齐，即使我也将对齐属性添加到 span。

【问题讨论】：

标签： html html-table valign

【解决方案1】：

试试：

<td colspan="2" style="vertical-align: top;">

valign 属性已弃用，不应使用。

【讨论】：

我首先尝试过，即使没有 span 和 h1，这也不起作用，因此我打破了已弃用的标签。这是一个简单的时事通讯，将向 50 人发送一次，我并不担心代码有多骇人听闻。谢谢你的建议

【解决方案2】：

您的图片上需要align="top" 或style="vertical-align:top :)

【讨论】：

问题是图像底部有大约 50 像素的透明度，我从我正在为其准备电子邮件的公司的页面采购图片，我无法访问他们的 ftp托管不同的图像。如果文本与顶部对齐，而图像保持原位（与顶部对齐），则图像上的文本应与图像外的文本对齐。但这似乎是不可能的......
您可以通过为文本指定 line-height 来稍微调整一下，以使其完美:)