垂直顶部对齐文本

Question

以下是我迄今为止尝试过的 DEMO 。

我需要的是将文本推到div的精确顶部，使其与图像顶部对齐方式匹配。

我希望图像和文本在一行中完全对齐，现在您可以看到文本顶部的小空间与顶部不完全对齐。

HTML

<div class="wrap"> 
    <div class="image"><img src="" /></div>
    <div class="content">Lorem ipsum</div>
</div>

CSS

.wrap{background:grey}
.image{display:table-cell; vertical-align:top}
.content{display:table-cell; vertical-align:top; font-size:24px}

http://jsfiddle.net/s38Uv/20/

Answer 1

您不需要display:table-cell垂直对齐到顶部 - 这是默认行为。

您有差距的原因是行高与文本周围的虚拟框不完全相同。差异取决于字体本身。如果您正在使用资源管理器7及更高版本，则可以将文本设置为display:inline-block，然后将margin-top: -0.Xem设置为其中X是任意数字。当然，你也可以用像素设置margin-top。