img标签摆脱的line-height

CSS：

div { 
    height:24px; 
    line-height:24px; 
}

HTML：

<div><img src="image.png"/>Text</div>

现在什么应该（我认为）产生是一个24像素高的div，并且文本应该在图像之后在div中垂直居中对齐。附：图像是24x24px。但是，它会将行高降低大约12px（将行高减少到12px并不能解决问题）。虽然作品将图像更改为12x12px，并将文字放在正确的位置。如果图像被完全删除，则文本位于正确的位置。我想我的问题是，为什么要这样做，如果/我该如何修复它。

谢谢，sharf。

来源

2013-05-20 sharf

给vertical-align:middle到的img

div > img 
{ 
    float:left; 
    vertical-align:middle; 
}

Fiddle

来源

2013-05-20 22:34:56 PSL

这修正文本，但现在我的形象被正确对齐（中间）进入被压低，因此它实际上挂出的DIV一些。编辑：给它一个垂直对齐的顶部修复它适当...对我来说似乎很奇怪。 – sharf

好的，如何http://jsfiddle.net/AFYfH/ – PSL

只是'img {vertical-align：middle; }'似乎工作（[Fiddle]（http://jsfiddle.net/7ZSxg/1/））。为什么'float：left'另外呢？ – doppelgreener

尝试向img添加vertical-align并尝试用它来按照自己想要的方式获取它。

来源

2013-05-20 22:34:54 Morfie

最简单的（但并不总是最好的）解决方案是

img { vertical-align: bottom; }

图像不甩开线高度;相反，它会导致线框的高度变得大于line-height。原因在于，默认情况下，图像被视为字母，尺寸由图像尺寸指定，位于文本基线上。因此，图像需要的高度是图像本身的高度加上文本基线与字体底部之间的距离。

在CSS术语中，“坐在文本基线上”是由默认设置vertical-align: baseline引起的。你可以用各种方式覆盖它，对垂直位置有不同的影响，但是要注意浏览器在执行vertical-align时有很多错误，而bottom的值非常简单，以至于它们可能是正确的。

来源

2013-05-21 05:20:55

img标签摆脱的line-height

回答

相关问题