vertical align image in div

Question

Okay here is the problem, I have images of different sizes, but that doesn't really matter because their width is always greater then their height, and all images are resized to a 100px width (height still is different in each image)

I am trying to vertical align the images inside a div of 100px x 100px. I tried all kinds of things. line-height, margin's auto, table cell methods all don't work for me...

Here's the html:

<div class="kassabon_product_image">
<img src="product1.png" />
</div>

and here's the CSS

.kassabon_product_image{
float: left;
display:table-cell;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
vertical-align:middle;
}

.kassabon_product_image img{
width: 100px;
}

Answer 1

.kassabon_product_image{
    display:table-cell;
    vertical-align:middle;
}

Remove the vertical-align from the img and that should do the trick.

Answer 2

see comments

.kassabon_product_image{
float: left;
text-align: center; /*using text-align:center in the outer div will center all elements inside the div*/
display:inline-block;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
}

.kassabon_product_image img{
width: 100px;
/*vertical-align:middle;*/ /*this is the wrong place to align*/
}