i-- i-- - 1 month ago 5
CSS Question

How to vertically align image in a td cell, without vertically-align

Following code:

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


and 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;
}


How can I align the second image with the link to the bottom of the cell? I was googling a lot but none of the solutions work for me...

Answer

Give the container (td) position: relative and the image, or more specifically the <p> which contains the image, position: absolute; bottom: 0;. See it in action here.

Comments