title: Center img & h2 vertical in table
body: <p>I'm trying to align an image and an heading vertically. I'd like to do this in a table because is should be some kind of a menu. So there are more of this 'segments'. The img and the heading have to be in the same td-element for some further functionality of my menu...</p>
  
  <p>I've tried <strong>vertical-align: middle</strong>, <strong>display: inline-block</strong> &amp; <strong>table-cell</strong> and many things more. But nothing seems to work for me. The h2-element seems to ignore all of this thinks and stick to the top.</p>
  
  <pre><code>img{float: left; height:100px; width:auto}
  td{width: 300px; verical-align:middle}
  
  &lt;table&gt;&lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;img src="http://placehold.it/70x70"&gt;
              &lt;h2&gt;TEXT&lt;/h2&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;img src="http://placehold.it/70x70"&gt;
              &lt;h2&gt;TEXT&lt;/h2&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;&lt;/table&gt;
  </code></pre>
  
  <p>Here is a fiddle of my problem <a href="https://jsfiddle.net/0x48n7qL/" rel="nofollow noreferrer">https://jsfiddle.net/0x48n7qL/</a></p>
  
  <p>How do I archieve this? What am I missing out?</p>
  
  <p><strong>EDIT:</strong>
  The actual size of the image and therefore the height of the row is relative to the size of the page so I can't use fixed height values.</p>