在表格中垂直居中 img & h2答案

【问题标题】：Center img & h2 vertical in table在表格中垂直居中 img & h2
【发布时间】：2015-11-08 12:16:58
【问题描述】：

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

我尝试过 vertical-align: middle、display: inline-block 和 table-cell 等等。但似乎没有什么对我有用。 h2-element 似乎忽略了所有这些想法并坚持到了顶部。

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/

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

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

【问题讨论】：

标签： html css html-table center vertical-alignment

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

你去吧：

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

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

【讨论】：