表格单元格内的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 
}