title: Clickable div with middle vertical aligned image and text
body: <p>Please see the code below, both image and text are located up in the div.
  How to vertical align to the middle, both the image (div_a) and the text (div_txt) inside <code>&lt;a&gt;</code>, using pure css, and keep the div clickable (preferred solution with cross browsers compatibility):</p>
  
  <pre><code>&lt;style type="text/css"&gt;
    a.div_a {
        display:block;
        width:320px;
        height:160px;
        background-color:#CCC;}
  &lt;/style&gt;
  
  &lt;a href="www.mydoamin.com" class="div_a"&gt;
    &lt;img src="http://jsfiddle.net/img/logo.png" style="float:left; margin-right:10px; background-color:#666;" /&gt;
    &lt;span class="div_txt"&gt;Content&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I tried the following, but that didn’t help:</p>
  
  <pre><code>.div_txt {vertical-align:middle;}
  </code></pre>
  
  <p>I found separated solutions on the above for image/text, but not for both together.</p>