Центр img & h2 вертикальный в таблице

Question

Я пытаюсь выровнять изображение и заголовок вертикально. Я бы хотел сделать это в таблице, потому что это должно быть какое-то меню. Таким образом, существует больше этих «сегментов». IMG и заголовок должен быть в том же TD-элементе для некоторой дополнительной функциональности моего меню ...

Я попытался вертикальное выравнивание: средний, дисплея: встроенный блок & стол -cell и многое другое. Но для меня ничего не работает. Элемент h2, кажется, игнорирует все эти мысли и придерживается вершины.

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> 

Вот скрипка моей проблемы https://jsfiddle.net/0x48n7qL/

Как это АРХИВ? Что я упускаю?

РЕДАКТИРОВАТЬ: Фактический размер изображения и, следовательно, высота строки является по отношению к размеру страницы, поэтому не могу использовать фиксированные значения высоты.

Answer 1

Там вы идете:

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

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

Answer 2

добавить на h2 эти свойства:

line-height: 100px; 
margin: 0px; 

https://jsfiddle.net/0x48n7qL/1/