i-- i-- - 7 months ago 35
CSS Question

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

Following code:

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

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;

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


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.