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

Question

通用标签

它是这样的：

_{（来源： garethjmsaunders.co.uk ）
我的饲料}

图标和文本在垂直方向上被误分配了。图标在表格单元格的顶部，文本在底部。文本和图标都占用16个像素，但是单元格仍然吃光19。如何对齐它们以保存这3个像素？

Answer 1

好吧，如果您选择背景图片方法，那么它非常简单： 通用标签

Answer 2

图像与文本的基线对齐，这不包括下降高度，下降高度是字母g或y的“刻度”。

如果要固定行/单元格的高度，则可以添加行高以使其垂直居中。例如，假设您的单元格高度为16px： 通用标签

另一种选择是将图标添加为背景图像，在单元格的左侧添加padding： 通用标签

第二个意味着您可以完全不需要表，现在有了一个主意...

Answer 3

其他陈述图像的答案不应成为内容的一部分，而仅是用于装饰，这值得商bat。我确实相信您应该在图像中添加一个空的alt属性，这样，如果您选择保留当前方法，屏幕阅读器就可以忽略该图像。

vertical-align属性是您需要在此处使用的属性，但是您要使用的是text-bottom。我还要假设您希望这是一个链接，所以下面是完整的代码示例： 通用标签

如果仍然不希望这样做，您可以尝试使用line-height和vertical-align的其他值，以找出最适合您的方法。

Answer 4

将其设置为背景图像有什么问题？ 通用标签

Answer 5

只需在IMG标签上尝试“ vertical-align：middle”，然后再为TD设置填充

Answer 6

尝试一下： 通用标签

Answer 7

我将两个元素（图像和文本）放在各自独立的表单元格中。您可以嵌套另一个表。那是一个很好的起点。然后您可以使用填充物等进行调整。 通用标签

Answer 8

您可以在position: relative; top: 3px;标签上执行<img>。您也可以在vertical-align: middle;标记上尝试<td>，但我认为它不能正常工作，因为我敢肯定我以前曾遇到过。您也可以将它们放在单独的<td>标签中，但这是不可以的。

Answer 9

我尝试了背景图像方法，但不像这样...

在CSS中... 通用标签

在页面中... 通用标签

• 使用“顶部” 属性来上下移动文本/标签。
• 使用 padding 属性来更改图标和文本/标签之间的水平空间。
• 您应该在所关注的所有浏览器中进行检查，因为它们的呈现可能会略有不同。