Html 如何在 TD 元素内垂直对齐图像和文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/447539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align image and text vertically within TD element?
提问by Mr. Lame
<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
My feed
</td>
This is how it looks like:
这是它的样子：
(source: garethjmsaunders.co.uk)
My feed
（来源：garethjmsaunders.co.uk）
我的饲料
The icon and the text is misalligned vertically. The icon is on the top of the table cell, the text is on the bottom. Both the text and the icon occupy 16 pixel but the cell still eats up 19. How can I align them to save those 3 pixels?
图标和文本在垂直方向上未对齐。图标位于表格单元格的顶部，文本位于底部。文本和图标都占用 16 像素，但单元格仍然占用 19。如何对齐它们以保存这 3 个像素？
回答by Joey
Well, if you choose the background image method, then it is very simple:
好吧，如果你选择背景图片的方式，那么就很简单了：
background: url(feed.png) left center no-repeat
回答by roryf
The image is aligning to the base line of the text, this does not include the descender height which is the 'tick' in letter like g or y.
图像与文本的基线对齐，这不包括下降高度，即 g 或 y 等字母中的“勾号”。
If the height of the row/cell is to be fixed, you can add line-height to get it to vertically centre. So for instance, assuming your cell is 16px high:
如果要固定行/单元格的高度，您可以添加 line-height 以使其垂直居中。例如，假设您的单元格高 16 像素：
td.feed {
line-height:16px;
}
The other option would be to add the icon as a background image, adding padding-left to the cell:
另一种选择是将图标添加为背景图像，向单元格添加 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 */
}
The second one would mean you could remove the need for tables at all, now there's an idea...
第二个意味着你可以完全不需要桌子，现在有一个想法......
回答by cowgod
Other answers that state the image shouldn't be part of the content and is merely for decoration, which is debatable. I do believe that you should add an empty altattribute to your image so that screen readers can ignore the image if you choose to keep your current method.
其他说明图像不应作为内容的一部分而仅用于装饰的答案，这是有争议的。我确实认为您应该alt为图像添加一个空属性，以便屏幕阅读器在您选择保留当前方法时可以忽略该图像。
The vertical-alignproperty is the one you need to be using here, but what you want to use is text-bottom. I'm also going to assume you want this to be a link, so here's a full code example:
该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>
If this still isn't desirable, you can experiment with line-heightand other values for vertical-alignto see what works best for you.
如果这仍然不理想，您可以尝试使用line-height和 其他值vertical-align来查看最适合您的值。
回答by Ms2ger
What's wrong with making it a background image?
将其设为背景图像有什么问题？
.feed {
background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
padding-left: 16px;
}
回答by Bryan A
Try this:
尝试这个：
<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. */
回答by Joey
simply try "vertical-align: middle" on IMG tag, after than you can also set padding for TD
只需在 IMG 标签上尝试“垂直对齐：中间”，之后您还可以为 TD 设置填充
回答by Paolo Bergantino
You could do position: relative; top: 3px;on the <img>tag. You could also try vertical-align: middle;on the <td>tag, but I don't think it'll work properly, as I'm pretty sure I've encountered this before. You could also put them in separate <td>tags, but that's kind of a no-no.
你可以position: relative; top: 3px;在<img>标签上做。您也可以尝试vertical-align: middle;使用<td>标签，但我认为它不会正常工作，因为我很确定我以前遇到过这种情况。您也可以将它们放在单独的<td>标签中，但这是一种禁忌。
回答by alex
I would put the two elements (image and text) in their own separate table cells. You could nest another table. That's a good place to start. Then you could play around with padding, etc. to adjust.
我会将这两个元素（图像和文本）放在它们自己单独的表格单元格中。你可以嵌套另一张桌子。这是一个很好的起点。然后，您可以使用填充等进行调整。
<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>
回答by sugardaddy
I tried the background image method but didn't like it as much as this...
我尝试了背景图像方法，但并不喜欢它...
In the CSS...
在 CSS...
.iconLabel {
position: relative;
top: -6px;
padding-left: 8px;
}
In the page...
在页面...
<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>
- Play with the "top"attribute to move the text/label up and down.
- Play with the paddingattribute to change the horizontal space between the icon and the text/label.
- You should check it across any browsers you're concerned about, as they may render with slight differences.
- 使用“top”属性上下移动文本/标签。
- 使用padding属性更改图标和文本/标签之间的水平空间。
- 您应该在您关注的任何浏览器上检查它，因为它们可能会呈现出细微的差异。
