如何在 td 单元格中垂直对齐图像，而无需垂直对齐答案

【问题标题】：How to vertically align image in a td cell, without vertically-align如何在 td 单元格中垂直对齐图像，而无需垂直对齐
【发布时间】：2012-08-26 06:46:46
【问题描述】：

以下代码：

<div id="test">
  <table>
    <tbody>
      <tr>
        <td>
          <img src="img1.jpg" />
          <p>Bla bla bla</p>
          <p><a href="#"><img src="img2.jpg"></a></p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

和 CSS：

#test td {
    width: 450px;
    height: 220px;
    vertical-align: top;
    border-bottom: 1px solid #000;
    border-right: 50px solid #fff;
}

#test td p {
    margin: 0 0 10px 0;
    width: 290px;
}

#test img {
    padding: 20px 5px 5px 5px;
    float:left;
}

如何将第二张图片与单元格底部的链接对齐？我在谷歌上搜索了很多，但没有一个解决方案适合我......

【问题讨论】：

你可以使用两行，其中两行 valign to top 就像你想要的那样。

标签： css alignment html-table vertical-alignment

【解决方案1】：

给容器 (td) position: relative 和图像，或者更具体地说是包含图像的<p>，position: absolute; bottom: 0;。 See it in action here.

【讨论】：

position: relative 松开我的单元格边框 :(

【解决方案2】：

试试这个

<td valign="top">
          <img src="img1.jpg" />
          <p>Bla bla bla</p>
          <p><a href="#"><img src="img2.jpg"></a></p>
        </td>

【讨论】：

我想没有说清楚。我希望内容与顶部垂直对齐，但最后一张图像 img2.jpg 与底部对齐。

【解决方案3】：

试试这个：

<img src="img1.jpg" />
<p>Bla bla bla</p>
<div class="clearFloat"></div>
<p><a href="#"><img src="img2.jpg"></a></p>

还有这个 CSS：

#test td {
    width: 450px;
    height: 220px;
    vertical-align: top;
    border-bottom: 1px solid #000;
    border-right: 50px solid #fff;
}

#test td p {
    margin: 24px 0 0 0;
    width: 290px;
    float: left;
}

#test img {
    padding: 20px 5px 5px 5px;
    float:left;
}
.clearFloat {
    clear: both;
}

演示：http://jsfiddle.net/maWJ2/

【讨论】：

【解决方案4】：

从#test img 中删除float:left;

#test img {
    padding: 20px 5px 5px 5px;
}

参考LIVE DEMO

【讨论】：