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

Question

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

18

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

这是它的样子：

_{(来源: garethjmsaunders.co.uk)}
我的订阅

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

- Mr. Lame

感谢所有帮助过我的人。我尝试了所有的解决方案，除了将图标和文本拆分为两个 TD。只有背景图片的解决方案有效。 - Mr. Lame

这里有一个解决方案 => https://dev59.com/HW025IYBdhLWcg3wKCf-#57590933 - A. Morel

10个回答

9

该图像与文本的基线对齐，但不包括字母（如g或y）中的下行高度。

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

td.feed {
    line-height:16px;
}

另一种选择是将图标作为背景图片添加，然后为单元格添加左填充：

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

第二种方法意味着你可以完全不需要表格，现在这是一个好主意...

- Rory

我个人使用背景图的方式，唯一的缺点是图片不可点击，很多用户在点击文本之前尝试点击图片。 - Paolo Bergantino

1

如果您将背景图像放在<a>元素上，则可以单击它。 - roryf

啊，说得好。我从来没有想过那个。我通常在 a 周围做一个 span。有趣。 - Paolo Bergantino

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的其他值，以确定最适合您的效果。

- cowgod

2

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

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

- Ms2ger

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

- Plan B

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属性来改变图标和文本/标签之间的水平空间。
你应该在任何你关心的浏览器中检查它，因为它们可能会以略微不同的方式呈现。

- sugardaddy

1

只需在IMG标记上尝试使用"vertical-align: middle"，然后您还可以为TD设置填充

- Joey

0

您可以在<img>标签上使用position: relative; top: 3px;。您也可以尝试在<td>标签上使用vertical-align: middle;，但我认为它可能无法正常工作，因为我之前遇到过类似的问题。您还可以将它们放在单独的<td>标签中，但这有点不太好。

- Paolo Bergantino

如果您已经在使用表格，为什么这会是不可取的呢？您至少可以获得自动垂直居中... - alex

嗯，我不知道他使用它的上下文，有可能这个表仍在被正确地使用，但是如果你要分割它，对我来说会有点太2002年了。这就是为什么我说“有点”，我个人会考虑它，但是在这些领域中有很多CSS纯粹主义者。 - Paolo Bergantino

我没有投反对票，是别人投的。我被投了两个反对票，哈哈。这里的人有时候很奇怪。 - alex

这可能是因为有人在问关于HTML的问题，而你们两个应该回答。就像我回答一些Fortran问题，但已经20年没碰过了（该死，时间过得这么快？）。 - Steve Perks

修改HTML会改变页面的语义含义。由于这是布局问题，而非内容或语义问题，因此应该使用基于布局的解决方案进行位置调整，可以使用CSS或者通过JavaScript修改DOM。 - cdeszaq

你们两个可能不应该回答这个问题？你是认真的吗？哇。 - Paolo Bergantino

0

我会将这两个元素（图像和文本）放在它们自己的单独表格单元格中。您可以嵌套另一个表格。那是一个不错的起点。然后，您可以尝试使用填充等来进行调整。

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

- alex

这种表格的嵌套会降低页面的语义价值。由于这是布局问题，而不是内容或语义问题，因此应该使用基于布局的解决方案进行位置调整，可以使用CSS或通过JavaScript更改DOM。 - cdeszaq

-1

您可以在td内添加一个具有一行和两个td的表格

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

- Farid Z

我觉得这不是正确的解决方法，应该有另外一种更简单的方式。 - srikanth_yarram

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joey · Accepted Answer

如果您选择背景图像方法，则非常简单：

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