Aligning image at the bottom of - image

Question

So I have a space for images of 120x120, it's for thumbnails, based specially in width.
It's a div that contains the image, that links to an article
I have an image of 120x57 but it stays at the top of the div, letting quite too much space from the text on the next div
<div class="thumb">
<img src="http://link.com/media/thumb.png" border="0" alt="thumb" title="thumb" class="thumblist">
</div>
The css for it:
margin: 8px 0;
width: auto;
height: 120px;
overflow: hidden;
I've tried with vertical-align:bottom, but no success, there is no other clean way to align it to the middle (or to the bottom at least of the ?
Regards

Answer 1

You can try this:
.thumb {
margin: 8px 0;
width: auto;
height: 120px;
overflow: hidden;
display:table-cell;
vertical-align:bottom;
}

Answer 2

I can think of a couple of ways, but none particularly elegant.
Setting the image in the background is the fastest, but the image can't be selected or printed (with default print settings). (Styles are inline for clarity.)
<a href="#" style="display: block; width: 120px; height: 120px;
background: url(thumb.jpg) bottom no-repeat;"></a>
Absolute positioning is a potent option, but it can have its issues.
<a href="#" style="display: block; width: 120px; height: 120px; position: relative;">
<img src="thumb.jpg" style="display: block; position: absolute; bottom: 0px; left: 0px; width: 120px;" /></a>
One of the simplest and surest ways is to just make a square image, padded as needed. It involves either manual work or additional script to prepare the images though.
Then there's table, but, well, it's table...
I'd go for the square image, if there's an image generator handy or there aren't too many thumbnails to adapt them in Photoshop myself. Failing that, background works just fine in most situations.