表格單元格內的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 
}