垂直頂部對齊文字

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是任意數字。當然，您也可以使用像素設置邊距。