css - 表格单元格中 div 的垂直对齐方式

Question

我有一个表格，其中的单元格按顺序包含一个图像和一个文本链接。我已经成功地将图像与 CSS 垂直对齐：

 .tdClass img {vertical-align:middle;}

但我似乎无法让其下方的文本链接与单元格底部对齐。无论我尝试了什么，它都保持在图像的正下方。这里的最终目标是当我的图像高度不同时，尽可能使单元格水平均匀。

<table width="100%" class="tableClass" id="tableId">
<tbody>
<tr>
    <td class="tdClass">
        <a href="#">
        <img src="#">
        </a>
        <div class="divClass">
            <a href="#">TEXT</a>
        </div>
    </td>
    <td class="tdClass">
        <a href="#">
        <img src="#">
        </a>
        <div class="divClass">
            <a href="#">TEXT</a>
        </div>
    </td>
</tr>
</tbody>
</table>

Answer 1

考虑为图像周围的链接添加统一的高度，足以容纳最高的图像。

.img {
    height: 50px;
    display: table-cell;
    vertical-align: middle;
}

<table width="100%" class="tableClass" id="tableId">
<tbody>
<tr>
    <td class="tdClass">
        <a href="#" class="img">
        <img src="http://placekitten.com/50/50">
        </a>
        <div class="divClass">
            <a href="#">TEXT</a>
        </div>
    </td>
    <td class="tdClass">
        <a href="#" class="img">
        <img src="http://placekitten.com/30/30">
        </a>
        <div class="divClass">
            <a href="#">TEXT</a>
        </div>
    </td>
</tr>
</tbody>
</table>

Answer 2

添加这个：

td{
  border: 1px solid red;
  height: 350px;
}

td a:first-child,
td .divClass{
  vertical-align: middle;
  display: inline-block;
  *display: inline; // ie7
  *zoom: 1; //ie7
}