如何在TD元素中垂直对齐图像和文本？
Mr.*_*ame 15 html html-table alignment
<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
My feed
</td>
这是它的样子:
(来源:garethjmsaunders.co.uk)
我的饲料
图标和文本垂直错位.图标位于表格单元格的顶部,文本位于底部.文本和图标都占据了16个像素,但是单元格仍然占用了19个.如何对齐它们以保存这3个像素？
Joe*_*oey 18
那么,如果你选择背景图像方法,那么它很简单:
background: url(feed.png) left center no-repeat
- +1,图像应该是背景图像,因为它比实际内容更具装饰性. (3认同)
图像与文本的基线对齐,这不包括下降高度,即字母中的'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 */
}
第二个意味着你可以完全取消对表格的需求,现在有了一个想法......
陈述图像的其他答案不应该是内容的一部分,仅仅是装饰,这是有争议的.我相信你应该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来查看最适合您的值.
| 归档时间： |
|
| 查看次数： |
66929 次 |
| 最近记录： |