Center img & h2 vertical in table

Question

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...

I've tried vertical-align: middle, display: inline-block & table-cell 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.

img{float: left; height:100px; width:auto}
td{width: 300px; verical-align:middle}

<table><tbody>
    <tr>
        <td>
            <img src="http://placehold.it/70x70">
            <h2>TEXT</h2>
        </td>
        <td>
            <img src="http://placehold.it/70x70">
            <h2>TEXT</h2>
        </td>
    </tr>
</tbody></table>

Here is a fiddle of my problem https://jsfiddle.net/0x48n7qL/

How do I archieve this? What am I missing out?

EDIT: 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.

Answer 1

There you go:

img {height:100px; width:auto; vertical-align: middle;}
td {width: 300px;}
h2 {display:inline-block; vertical-align: middle;}

https://jsfiddle.net/nr3j6Lco/2/