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

Question

A typical css alignment problem:

<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/

How would I make the image always appear on the bottom of the table, and the text to stay in the middle?

Thanks

Answer 1

You can set the vertical-align css property:

#your_td {
 vertical-align: bottom;
}

See this FIDDLE

Answer 2

Based on your example, you could use positioning to achieve what you want:

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

jsFiddle example

Answer 3

Set valign to bottom

<td valign="bottom">

Hope this helps