垂直顶部对齐文字

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垂直对齐顶部 - 这是默认的行为。

你有一个缺口的原因是线条高度与文本周围的虚拟框不完全相同。差异取决于字体本身。如果您使用的是explorer 7及以上版本，则可以将文本设置为display:inline-block，然后将margin-top: -0.Xem设置为X是任意数字。当然，您也可以使用像素设置边距。