Question

<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
 My feed
 </td>

这就是它的样子：

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

图标和文字垂直错位。图标位于表格单元格的顶部，文本位于底部。文本和图标都占据了16个像素，但是单元格仍然占用了19个。如何对齐它们以保存这3个像素？

Answer 1

好吧，如果你选择背景图像方法，那么它很简单：

background: url(feed.png) left center no-repeat

Answer 2

图像与文本的基线对齐，这不包括下降高度，即字母中的'tick'，如g或y。

如果要修复行/单元格的高度，可以添加行高以使其垂直居中。例如，假设您的单元格高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 */
}

第二个意味着您可以完全取消对表格的需求，现在有了一个想法......

Answer 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的其他值来查看哪种方法最适合您。

Answer 4

将它制作背景图像有什么问题？

.feed {
  background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
  padding-left: 16px;
}

Answer 5

只需在IMG标签上尝试“vertical-align：middle”，之后你也可以为TD设置填充

Answer 6

试试这个：

<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. */

Answer 7

您可以在position: relative; top: 3px;标记上执行<img>。你也可以在vertical-align: middle;标签上试用<td>，但我认为它不会正常工作，因为我很确定我以前遇到过这个问题。您也可以将它们放在单独的<td>标签中，但这是一种禁忌。

Answer 8

我会将两个元素（图像和文本）放在各自独立的表格单元格中。你可以嵌套另一个表。这是一个很好的起点。然后你可以玩填充等来调整。

<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>

Answer 9

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

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

使用＆＃34; top＆＃34; 属性来上下移动文字/标签。
使用 padding 属性进行游戏，以更改图标与文字/标签之间的水平空间。
您应该在您关注的任何浏览器中查看它，因为它们可能会略有不同。

Answer 10

您可以在td内添加一个表，其中包含一行和两个tds

    <td>
        <table><tr>
            <td><img src="image/myimage.gif" alt="myimage.gif"/></td>
            <td>My text</td>
        </tr></table>
    </td>

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

10 个答案: