title: How to align text and image in a CSS box?
body: <p>I would like to vertically align some text and an image in a CSS box.</p>
  
  <p>I tried several methods, here is the code for the last one I tried called "display:table-cell-method"</p>
  
  <pre><code>&lt;div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;"&gt;
  2:38&lt;img src="images/stopwatch-button-play.png"&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>Here is a screenshot of the result in the newest version of Firefox: <a href="http://screencast.com/t/Yzg2MzAzNW" rel="nofollow noreferrer">http://screencast.com/t/Yzg2MzAzNW</a></p>
  
  <p>The image is centered correctly, the text is only centered nearly correctly. It sits at the baseline of the image. Why?</p>