title: Why are img and div widths miscalculated in Chrome?
body: <p>I use following code to center images horizontally and vertically in DIV<br>
  Properties given to DIV is <code>width</code> &amp; <code>height</code>, <code>overflow:hidden</code>, and <code>display:block</code>.</p>
  
  <p>Problem: <code>margin-top</code> and <code>margin-left</code> miscalculated only in Chrome, while code is working perfectly in FF and IE</p>
  
  <pre><code>$('.centerImage').each(function(i) {
      var divH = $(this).parent().height();
      var divW = $(this).parent().width();
      var orgImgH = $(this).height();
      var orgImgW = $(this).width();
      if (orgImgH &gt; orgImgW) {
          $(this).css('width', divW);
          var imgH = $(this).height();
          var mTop = (divH - imgH) / 2;
          $(this).css("margin-top", (mTop &lt; 0) ? mTop : -mTop); //if margin-top value is less than 0 use as is and greater than 0 multiply by -1
      } else {
          $(this).css('height', divH);
          var imgW = $(this).width();
          var mLeft = (divW - imgW) / 2;
          //alert(imgW); alert(mLeft); //chrome bug
          $(this).css("margin-left", (mLeft &lt; 0) ? mLeft : -mLeft);
      }
  });
  </code></pre>
  
  <p>Any ideas?</p>