坐在牢房中间的文字,不会向上移动

时间:2013-06-27 14:49:49

标签: html css html-table vertical-alignment

我有以下代码:

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

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

PS:它是一张桌子的原因是它是电子邮件时事通讯的一部分。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分: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>标记,默认情况下有上边距和下边距。

我整合了您的样式,您不需要pspan元素。

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

除了段落上的默认边距外,你非常接近,容易被忽视。

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

<强> PS

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