title: centering text vertically and horizontally in same table cell with image floated left
body: <p>I know this probably seems like a little problem.  It just feels like there should be an easy solution. I have a feeling I'm SOL but I figured I'd ask first.</p>
  
  <p><a href="http://jsfiddle.net/bczengel/FSDz9/5/" rel="noreferrer">http://jsfiddle.net/bczengel/FSDz9/5/</a></p>
  
  <h2>Problem:</h2>
  
  <p>When the image is not floated left it has the desired end result where the image and the text are both vertically centered.  When you float the image left the image is vertically centered and the text is aligned with the top of the image.</p>
  
  <h2>Requirements:</h2>
  
  <ul>
  <li>One table cell</li>
  <li>CSS only with the given html (or minimal changes to the html)</li>
  <li>I would like to avoid a line-height solution because the stylesheet is applied to many existing pages some of which have multiple lines in the text</li>
  </ul>