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

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>

UPDATED EXAMPLE HERE

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

值得注意的是inline元素尊重标记中的空格，因此如果存在空格，您将得到this之类的结果。你显然会避免这样做..