title: CSS center the image horizontally and vertically in img tag
body: <p>I have tried many solutions from stackoverflow. None works for my case. I am wondering if I can still center the image within my html structure limitation? </p>
  
  <p>Here is my CSS and HTML.</p>
  
  <pre><code>&lt;div class="test"&gt;  
      &lt;img src="http://test.com/test.jpg" /&gt;
      This is the test text here..This is the test text here.This is the test text here.
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.test {
      width: 300px;
      height: 120px;
      border: solid 1px #CCCCCC;
  }
  
  img {
      position: relative;
      top:auto;
      left: auto;
      float: right;
      display:table-cell;
      width:auto;
      height:auto;
      max-width: 100px;
      max-height: 100px;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>Here is my test case in <a href="http://jsfiddle.net/QBK2y/3/" rel="nofollow">http://jsfiddle.net/QBK2y/3/</a></p>