在 table 中垂直居中 img 和 h2

Question

我正在尝试垂直对齐图像和标题。我想在 table 中执行此操作，因为它应该是某种菜单。所以这个'segments'的比较多。 img 和标题必须在相同的 td-element 中才能使我的菜单具有更多功能...

我试过vertical-align：中间，显示：inline-block & table-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>

这是我的问题 fiddle https://jsfiddle.net/0x48n7qL/

如何存档？我错过了什么？

编辑： 图片的实际大小以及行的高度是相对于页面大小的，所以我不能使用固定的高度值。

Answer 1

将这些属性添加到您的 h2 中：

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

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

Answer 2

好了：

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

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

在 table 中垂直居中 img 和 h2

Center img & h2 vertical in table

html

css

html-table

center

vertical-alignment