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

这是它的样子：


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

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

4

10 回答 10

19

好吧，如果你选择背景图片的方式，那么就很简单了：

background: url(feed.png) left center no-repeat
于 2009-01-15T17:14:42.680 回答
9

图像与文本的基线对齐，这不包括下降高度，即 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 */
}

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

于 2009-01-15T17:08:36.000 回答
6

其他说明图像不应成为内容的一部分而仅用于装饰的答案，这是值得商榷的。我确实认为您应该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来查看最适合您的值。

于 2009-01-15T19:53:39.443 回答
2

将其设置为背景图像有什么问题？

.feed {
  background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
  padding-left: 16px;
}
于 2009-01-15T18:45:10.860 回答
2

试试这个：

<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. */
于 2009-01-15T20:01:50.720 回答
1

只需在 IMG 标签上尝试“垂直对齐：中间”，之后您还可以为 TD 设置填充

于 2009-01-15T17:03:12.703 回答
1

我尝试了背景图像的方法，但并不像这样喜欢它......

在 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属性来改变图标和文本/标签之间的水平间距。
  • 您应该在您关心的任何浏览器上检查它，因为它们的渲染可能略有不同。
于 2014-10-11T05:39:13.797 回答
0

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

于 2009-01-15T16:50:57.923 回答
0

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

<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>
于 2009-01-15T16:54:22.503 回答
0

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

    <td>
        <table><tr>
            <td><img src="image/myimage.gif" alt="myimage.gif"/></td>
            <td>My text</td>
        </tr></table>
    </td>
于 2020-10-05T22:03:23.990 回答