html - 在表格中垂直居中 img 和 h2

Question

我正在尝试垂直对齐图像和标题。我想在表格中执行此操作，因为它应该是某种菜单。所以有更多这样的“分割”。 img 和标题必须位于同一个 td 元素中，才能实现我的菜单的某些其他功能...

我已经尝试过vertical-align: middle、display: 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/