title: vertical align image in div
body: <p>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)</p>
  
  <p>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...</p>
  
  <p>Here's the html:</p>
  
  <pre><code>&lt;div class="kassabon_product_image"&gt;
  &lt;img src="product1.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here's the CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>