如何在 TD 元素中垂直对齐图像和文本？
Posted
技术标签:
【中文标题】如何在 TD 元素中垂直对齐图像和文本？【英文标题】：How to align image and text vertically within TD element? 【发布时间】：2010-10-01 15:27:37 【问题描述】：<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
My feed
</td>
看起来是这样的：
（来源：garethjmsaunders.co.uk） 我的饲料
图标和文本垂直错位。图标位于表格单元格的顶部，文本位于底部。文本和图标都占用 16 个像素，但单元格仍然占用 19 个像素。如何对齐它们以节省这 3 个像素？
【问题讨论】：
感谢所有提供帮助的人。除了将图标和文本拆分为两个 TD-s 之外，我尝试了所有解决方案。只有背景图片解决方案有效。 这里有一个解决方案 => ***.com/a/57590933/2736742 【参考方案1】：好吧，如果你选择背景图片的方式，那就很简单了：
background: url(feed.png) left center no-repeat
【讨论】：
+1，图片应该是背景图片，因为它比实际内容更具装饰性。【参考方案2】：图像与文本的基线对齐，这不包括下降高度，即 g 或 y 等字母中的“勾号”。
如果要固定行/单元格的高度，可以添加 line-height 使其垂直居中。例如，假设你的单元格是 16px 高：
td.feed
line-height:16px;
另一种选择是将图标添加为背景图像，将 padding-left 添加到单元格：
td.feed
background: transparent url(/wp-content/feed-icon-16x16.gif) no-repeat left center;
padding-left: 18px; /* width of feed icon plus 2px spacing */
第二个意味着您可以完全消除对表格的需求，现在有一个想法......
【讨论】：
我个人使用背景图片的方式，唯一的缺点是图片不可点击，很多用户尝试在文字之前点击图片。 如果你把背景图片放在 元素上，它将是可点击的。 啊。触摸。我从来没有想过。我通常在a周围做一个跨度。有趣。【参考方案3】：其他说明图像不应成为内容的一部分且仅用于装饰的答案，这是值得商榷的。我确实认为您应该为您的图像添加一个空的alt 属性，以便屏幕阅读器可以在您选择保留当前方法时忽略该图像。
vertical-align 属性是您需要在此处使用的属性，但您要使用的是text-bottom。我还假设您希望这是一个链接，所以这里有一个完整的代码示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>garethjmsaunders.co.uk</title>
<style type="text/css">
a text-decoration: none;
a img border: 0; vertical-align: text-bottom;
</style>
</head>
<body>
<table>
<tr>
<td>
<a href="" title="garethjmsaunders.co.uk rss feed">
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif" />
My feed
</a>
</td>
</tr>
</table>
</body>
</html>
如果这仍然不理想，您可以试验line-height 和vertical-align 的其他值，看看哪种最适合您。
【讨论】：
【参考方案4】：将其设为背景图片有什么问题？
.feed
background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
padding-left: 16px;
【讨论】：
【参考方案5】：试试这个：
<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
<span class="feedTxt">My feed</span>
</td>
.feedTxt line-height: 20px; /* Or whatever the height of the image is. Adjust as needed. */
【讨论】：
【参考方案6】：只需在 IMG 标签上尝试“vertical-align: middle”，之后您还可以为 TD 设置填充
【讨论】：
【参考方案7】：我尝试了背景图片的方法，但没有这么喜欢它......
在 CSS 中...
.iconLabel
position: relative;
top: -6px;
padding-left: 8px;
在页面中...
<td style="text-align:center;">
<a href="overview.cfm"
><img src="Globe.png"
align="middle" border="0"
><span class="iconLabel">Overview</span
></a>
</td>
【讨论】：
【参考方案8】：我会将这两个元素（图像和文本）放在各自单独的表格单元格中。您可以嵌套另一个表。这是一个很好的起点。然后你可以玩一下填充等来调整。
<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>
【讨论】：
这种表格的嵌套会降低页面的语义价值。由于这是布局问题，而不是内容或语义问题，因此应使用基于布局的解决方案来调整位置，或者使用 CSS，或者使用 javascript 更改 DOM。【参考方案9】：你可以在<img> 标签上做position: relative; top: 3px;。您也可以在<td> 标签上尝试vertical-align: middle;，但我认为它不会正常工作，因为我很确定我以前遇到过这种情况。您也可以将它们放在单独的 <td> 标记中，但这是一种禁忌。
【讨论】：
如果您已经在使用一张桌子，那为什么要禁止呢？你至少会得到自动垂直居中... 嗯，我不知道他的上下文，桌子仍然被正确使用的可能性很小，但是如果你要拆分它，它会变得有点太 2002为了我。这就是我说“有点”的原因——我个人认为是这样，但围绕这些部分有很多 CSS 纯粹主义者。 我没有投反对票，其他人投了反对票。我得到了两次投票，大声笑。这里的人有时很奇怪。 这可能是因为有人问了一个关于 HTML 的问题，而你们两个可能应该回答。有点像我回答一些 20 年来从未接触过的 Fortran 问题（该死，有那么长吗？）。 修改 HTML 会改变页面的语义。由于这是布局问题，而不是内容或语义问题，因此应使用基于布局的解决方案调整位置，或者使用 CSS，或者使用 javascript 更改 DOM。【参考方案10】：您可以在 td 内添加一个表格，其中包含一行和两个 tds
<td>
<table><tr>
<td><img src="image/myimage.gif" /></td>
<td>My text</td>
</tr></table>
</td>
【讨论】：
以上是关于如何在 TD 元素中垂直对齐图像和文本？的主要内容，如果未能解决你的问题，请参考以下文章