垂直顶部对齐文本

Question

Here is the DEMO which I have tried so far.

What I need is to push the text to the exact top of the div so that it matches the image top alignment.

I want Both image and the text to be align exactly like in one line, now you can see the little space on the top of the text which is not perfectly aligned to the top.

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

You don't need display:table-cell to vertically align to top - that is default behaviour.

The reason you have a gap is that the line-height isn't exactly the same as the virtual box around the text. The difference depends on the font itself. If you are working for explorer 7 and above, you can set the text to display:inline-block , then margin-top: -0.Xem where X is an arbitrary number. You can set margin-top with pixels too, of course.