title: CSS: Why "vertical-align: middle" does not work?
body: <p>Consider the following example: (<a href="http://jsfiddle.net/cXUnT/" rel="noreferrer">live demo here</a>)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a&gt;&lt;img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>a {
      display: block;
      background: #000;
      line-height: 40px;  
  }
  img {
      vertical-align: middle;
  }
  </code></pre>
  
  <p>The output is:</p>
  
  <p><img src="https://i.stack.imgur.com/2KlEk.png" alt="enter image description here"></p>
  
  <p>Why the image is not vertically centered ? </p>
  
  <p>How could I fix that so it will work in all major browsers ?</p>
  
  <p>Please don't assume any image size (like 32x32 in this case), because in the real case the image size is unknown.</p>