img标签丢掉线高

Question

好吧,这是一些css和html:

CSS:

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

HTML:

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

现在应该(我认为)产生的是一个24像素高的div,文本应该在div之后垂直居中对齐,在图像之后.PS图像是24x24px.然而,它将线高度抛出大约12px(将线高减少到12px并不能解决它).将图像更改为12x12px虽然有效但将文本放在正确的位置.如果图像被完全删除,则文本位于正确的位置.我想我的问题是为什么它正在做它是什么,以及我是否/如何解决它.

谢谢,夏普.

Answer 1

给vertical-align:middleimg

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

小提琴