title: Vertically align an image next to paragraph
body: <p>I'm trying to get an image that is usually shorter in height than the adjacent paragraph to vertically align in the middle and just can't do it</p>
  
  <pre><code>&lt;div class="element"&gt;
      &lt;img  src="http://dummyimage.com/75" /&gt;
      &lt;p  class="text" &gt;Blah Blah&lt;br/&gt;Blah Blah&lt;br/&gt;Blah Blah&lt;br/&gt;Blah Blah&lt;br/&gt;Blah Blah&lt;br/&gt;Blah Blah&lt;br/&gt;Blah Blah&lt;br/&gt;Blah Blah&lt;br/&gt;
      &lt;/p&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here's my css so far </p>
  
  <pre><code>.element{display:table;height:100%}
  .text{display:table-cell;background:#CC0;padding:20px;}
  .element img{display:table-cell;margin-right:10px;vertical-align:middle;}
  </code></pre>
  
  <p>And a jsfiddle <a href="http://jsfiddle.net/0krndsav/" rel="nofollow">http://jsfiddle.net/0krndsav/</a></p>
  
  <p>Most other questions want the paragraph in the vertical middle of an image...</p>
  
  <p>Any ideas?</p>