Question

I would like to vertically align some text and an image in a CSS box.

I tried several methods, here is the code for the last one I tried called “display:table-cell-method”

<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img src="images/stopwatch-button-play.png">
</div> 

Here is a screenshot of the result in the newest version of Firefox: http://screencast.com/t/Yzg2MzAzNW

The image is centered correctly, the text is only centered nearly correctly. It sits at the baseline of the image. Why?

Answer 1

change the following

<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img style="vertical-align:middle" src="images/stopwatch-button-play.png">
</div>