title: Table cell content: align text top-left and image in the middle in HTML
body: <p>I have a table in html.
  The content of this table is text and an image. I would align the text in the top-left corner and the image in the middle (vertical-align).
  I tried in this way:</p>
  
  <p>CSS:</p>
  
  <pre><code>table td {border-collapse: collapse;}
  #tabella {border: 1px solid black; text-align: left; vertical-align: top;}
  #variante {vertical-align: middle;}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;"&gt;text
  &lt;br&gt;
  &lt;img id="variante" width="75" border="0" src="www.favetta.com/image.png"&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>But in this way I obtain all (text and image) aligned in the top-left corner of the cell.
  Any suggestion?</p>