Question

典型的css对齐问题：

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">           
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>
           <div>text</div>
          <div ></div>
           <img style="vertical-align: bottom;" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/1118727_100000298033362_1412277170_q.jpg"/>
      </td>      
   </tr>
</table>

http://jsfiddle.net/R5TAY/

如何让图像始终显示在表格的底部，文字留在中间？

由于

Answer 1

您可以设置vertical-align css属性：

#your_td {
 vertical-align: bottom;
}

请参阅 FIDDLE

Answer 2

根据您的示例，您可以使用定位来实现您想要的目标：

td {
    position:relative;
}
img {
    position:absolute;
    bottom:0;
}

<强> jsFiddle example

Answer 3

将valign设置为底部

<td valign="bottom">

希望这有帮助

将表格内的图像垂直对齐到底部

3 个答案: