title: Why are images centered vertically with `line-height` positioned 2 pixels below where they should be?
body: <p><strong>Short story:</strong></p>
  
  <p><a href="http://jsfiddle.net/dandv/keucK/" rel="noreferrer">jsfiddle here</a>. The behavior is consistently wrong in Chrome 21, Firefox 15 and IE9, which makes me think I'm misunderstanding something about the CSS spec.</p>
  
  <p><strong>Longer story:</strong></p>
  
  <p>I want to center an image vertically using line-height. I've set the height of the image container equal to the line-height, I've reset margins, paddings and borders for all elements, yet the image is 2 pixels below where it should be. This happens whether the image is smaller than the container, or larger than it (in which case I used <code>max-width: 100; max-height: 100%</code> to size it down).</p>
  
  <p>The image has an even number of pixels in both cases. I wouldn't care that much for images smaller than the container, but for images that are larger, a 2-pixel line from the container background will bleed through at the top of the image.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Images centered vertically with line-height have center miscalculated by 2 pixels&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
          * { margin: 0; padding: 0; border: 0px solid cyan; }  /* reset all margins, paddings and borders */
          html {
              font-size: 16px;
              line-height: normal;
          }
          body {
              line-height: 100%;
              background: gray;
          }
          .img-wrapper-center {
              width: 400px;
              height: 200px;  /* necessary, besides line-height, if images are taller than it */
              line-height: 200px;  /* must be equal to line-height */
              text-align: center;
              background: white;
          }
          .img-wrapper-center img {
              vertical-align: middle;
              /* Comment the two rules below. The first image will still be mis-aligned by two pixels, but the second will not. */
              max-width: 100%; max-height: 100%;  /* force scaling down large images */
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="img-wrapper-center" id="div1"&gt;
          &lt;img src="http://gravatar.com/avatar" id="img1"/&gt;  &lt;!-- 80x80 --&gt;
      &lt;/div&gt;
  
      &lt;div class="img-wrapper-center" id="div2" style="background: green"&gt;
          &lt;img src="http://www.w3.org/html/logo/img/class-header-semantics.jpg" id="img2" /&gt;  &lt;!-- 495x370 --&gt;
      &lt;/div&gt;
  
      &lt;p&gt;
      Note how the second image is misaligned down by two pixels.
      The first one is mis-aligned the same way. Sizes and coordinates are below.
      &lt;/p&gt;
  
      &lt;script&gt;
          document.writeln('div1 top: ' + document.getElementById('div1').offsetTop + '&lt;br/&gt;');
          document.writeln('image 1 height: ' + document.getElementById('img1').offsetHeight + '&lt;br/&gt;');
          document.writeln('div1 height: ' + (document.getElementById('div1').offsetHeight) + '&lt;br/&gt;');
          document.writeln('image 1 top should be at: ' + (document.getElementById('div1').offsetHeight - document.getElementById('img1').height) / 2 + '&lt;br/&gt;');
          document.writeln('image 1 top actually is at: ' + document.getElementById('img1').offsetTop + '&lt;br/&gt;');
          document.writeln('div2 top: ' + document.getElementById('div2').offsetTop + '&lt;br/&gt;');
          document.writeln('img2 top: ' + document.getElementById('img2').offsetTop + '&lt;br/&gt;');
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>