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

那么,如果你选择背景图像方法,那么它很简单:

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

+1,图像应该是背景图像,因为它比实际内容更具装饰性. (3认同)

roryf.. 9

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

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

那么,如果你选择背景图像方法,那么它很简单:

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

图像与文本的基线对齐,这不包括下降高度,即字母中的'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.我也假设您希望这是一个链接,所以这是一个完整的代码示例:

  
    
    
  




  
    
    My feed
  

如果仍然不合适,您可以尝试使用line-height其他值vertical-align来查看最适合您的值.