<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
My feed
</td>
这是它的样子:
(来源: garethjmsaunders.co.uk)
我的订阅
图标和文本在垂直方向上错位。图标位于单元格顶部,文本位于底部。文本和图标都占用16像素,但单元格仍然占用19个像素。如何对齐以节省这3个像素?
<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
My feed
</td>
这是它的样子:
(来源: garethjmsaunders.co.uk)
我的订阅
图标和文本在垂直方向上错位。图标位于单元格顶部,文本位于底部。文本和图标都占用16像素,但单元格仍然占用19个像素。如何对齐以节省这3个像素?
如果您选择背景图像方法,则非常简单:
background: url(feed.png) left center no-repeat
该图像与文本的基线对齐,但不包括字母(如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 */
}
<!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
的其他值,以确定最适合您的效果。将其设置为背景图片有什么问题?
.feed {
background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
padding-left: 16px;
}
试试这个:
<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. */
.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>
只需在IMG标记上尝试使用"vertical-align: middle",然后您还可以为TD设置填充
您可以在<img>
标签上使用position: relative; top: 3px;
。您也可以尝试在<td>
标签上使用vertical-align: middle;
,但我认为它可能无法正常工作,因为我之前遇到过类似的问题。您还可以将它们放在单独的<td>
标签中,但这有点不太好。
我会将这两个元素(图像和文本)放在它们自己的单独表格单元格中。您可以嵌套另一个表格。那是一个不错的起点。然后,您可以尝试使用填充等来进行调整。
<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>
您可以在td内添加一个具有一行和两个td的表格
<td>
<table><tr>
<td><img src="image/myimage.gif" alt="myimage.gif"/></td>
<td>My text</td>
</tr></table>
</td>