文本位于单元格中间，不会向上移动答案

【问题标题】：Text Sitting Middle of Cell, will not move up文本位于单元格中间，不会向上移动
【发布时间】：2013-06-25 03:30:22
【问题描述】：

我有以下代码：

<table border="0" cellspacing="0" cellpadding="0" width="130" align="left">
<tbody>
<tr>
<td><a title="View Member" href="$$app_url$$/member/profile/index.cfm?profileid=24215649&amp;wldsite=$$site_id$$" target="_blank"><img style="border: 1px solid #666; border-radius: 5px; display: block;" src="http://s.wldcdn.net/newsletters/uploads/assets/000/026/770/336cc11b947060b2ef2bf68ddc2f0c05_original.jpg?1372264611" alt="" width="145" /></a></td>
</tr>
<tr>
<td width="130" height="16">
<p style="text-align: center; font-size: 15px; font-family: Arial, Helvetica, sans-serif;"><span style="text-decoration: underline;"><strong><a title="View Member" href="$$app_url$$/member/profile/index.cfm?profileid=24215649&amp;wldsite=$$site_id$$" target="_blank">George</a></strong></span></p>
</td>
</tr>
</tbody>
</table>

我不知道为什么或修复了出现在第二行中心的名称。我希望它直接出现在图像下方，但无法找出正确的代码组合以使其更靠近图像底部。

PS：它是一个表格的原因是它是电子邮件通讯的一部分。

任何帮助将不胜感激。

【问题讨论】：

请澄清：“我希望它直接出现在图像后面...”这是否意味着图像与文本重叠？
请注意，电子邮件客户端因不能很好地呈现 HTML/CSS 而臭名昭著。在现代浏览器中运行良好的技术在 Outlook 等电子邮件客户端中将惨遭失败。
@MarcAudet 我已更新为将后面更改为下面。道歉。
是的，我了解电子邮件中 HTML/CSS 的限制。谢谢。

标签： html css html-table vertical-alignment

【解决方案1】：

快速修复：

<table border="0" cellspacing="0" cellpadding="0" width="130" align="left">
<tbody>
<tr>
<td><a title="View Member" href="$$app_url$$/member/profile/index.cfm?profileid=24215649&amp;wldsite=$$site_id$$" target="_blank"><img style="border: 1px solid #666; border-radius: 5px; display: block;" src="http://s.wldcdn.net/newsletters/uploads/assets/000/026/770/336cc11b947060b2ef2bf68ddc2f0c05_original.jpg?1372264611" alt="" width="145" /></a></td>
</tr>
<tr>
<td width="130" height="16" style="vertical-align: top; text-align: center; font-size: 15px; font-family: Arial, Helvetica, sans-serif;">
<strong><a style="text-decoration: underline;" title="View Member" href="$$app_url$$/member/profile/index.cfm?profileid=24215649&amp;wldsite=$$site_id$$" target="_blank">George</a></strong>
</td>
</tr>
</tbody>
</table>

问题是<p> 标签默认有上边距和下边距。

我整合了您的样式，您不需要 p 或 span 元素。

另外，将vertical-align: top 添加到感兴趣的表格单元格中。

除了段落的默认边距很容易被忽略之外，您已经非常接近了。

小提琴演示：http://jsfiddle.net/audetwebdesign/fEPLB/

附言

我会将<strong> 放在链接文本而不是链接周围...

【讨论】：