图像后的文本具有与简单文本不同的垂直坐标

Question

我尝试显示两个水平块.一个有图像和文字,第二个 - 只有文字.文本应垂直对齐.代码:http://jsfiddle.net/buDrY/

问题是第一个块中文本的Y坐标比第二个块中的文本Y大一个或两个像素.结果在Chrome,FF,IE中相同:

我的错误在哪里？

HTML:

<div id="text-with-image">
    <img src="http://placehold.it/48x48" width="48" height="48" />First
</div>
<div id="text">
    Second
</div>

CSS:

#text-with-image,
#text {
    height: 48px;
    vertical-align: middle;
    display: table-cell;
    border: solid;
    text-decoration: underline;
}

img {
    vertical-align: middle;
}

Answer 1

如果不采用负边距或沿着这些线的任何东西,一种可能的解决方案是用文本包装文本<span>,然后应用vertical-align:middle.

<div id="text-with-image">
    <img src="http://placehold.it/48x48" width="48" height="48" /><span>First</span>
</div>

这里有更新的例子

#text-with-image > span {
    vertical-align:middle;
}

值得一提的是,inline元素尊重空白的标记,因此,如果一个空间存在,你会得到类似的结果这样.你显然会避免这样做..