0

这是我迄今为止尝试过的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/

4

1 回答 1

0

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

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

于 2013-02-08T11:00:30.183 回答