Question

好吧，所以这是一些css和html：

的CSS：

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

HTML：

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

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

谢谢，沙夫。

Answer 1

将vertical-align:middle提交给img

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

Fiddle

Answer 2

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

Answer 3

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

img { vertical-align: bottom; }

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

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

img标签丢掉线高

3 个答案: