如何在 TD 元素中垂直对齐图像和文本？答案

【问题标题】：How to align image and text vertically within TD element?如何在 TD 元素中垂直对齐图像和文本？
【发布时间】：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 之外，我尝试了所有解决方案。只有背景图片解决方案有效。
这里有一个解决方案 => stackoverflow.com/a/57590933/2736742

标签： html alignment html-table

【解决方案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 alt="" 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 alt="Overview" src="Globe.png" 
        align="middle" border="0" height="60" width="60"
        ><span class="iconLabel">Overview</span
    ></a> 
</td>

使用 "top" 属性来上下移动文本/标签。
使用 padding 属性来改变图标和文本/标签之间的水平间距。
您应该在您关心的所有浏览器上检查它，因为它们的呈现方式可能会略有不同。

【讨论】：

【解决方案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" alt="myimage.gif"/></td>
            <td>My text</td>
        </tr></table>
    </td>

【讨论】：