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
}

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

2 个答案: