1

好的，这是一些css和html：

CSS：

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

html:

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

现在（我认为）应该产生的是一个 24 像素高的 div，并且文本应该在 div 中垂直居中对齐，位于图像之后。PS图像是24x24px。但是，它会使 line-height 大约 12px 太多（将 line-height 减少到 12px 并不能解决它）。将图像更改为 12x12px 可以，但可以将文本放在正确的位置。如果图像被完全删除，则文本在正确的位置。我想我的问题是为什么要这样做，以及是否/如何解决它。

谢谢，夏尔夫。

4

3 回答 3

5

给vertical-align:middleimg

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

小提琴

于 2013-05-20T22:34:56.927 回答
1

尝试将 vertical-align 添加到 img 并尝试使用它以获得您想要的方式。

于 2013-05-20T22:34:54.337 回答
1

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

img { vertical-align: bottom; }

图像不会偏离线高；相反，它会导致 line box 的高度大于line-height. 这样做的原因是，默认情况下，图像被视为一个字母，其大小由图像尺寸指定，位于文本基线上。因此，图像需要的高度是图像本身的高度加上文本基线和字体底部之间的距离。

在 CSS 术语中，“坐在文本基线上”是由vertical-align: baseline. 您可以通过各种方式覆盖它，对垂直放置产生不同的影响，但要注意浏览器在实现 时存在许多错误vertical-align，并且 的值bottom非常简单，以至于他们可能正确。

于 2013-05-21T05:20:55.793 回答