title: line-height as a percentage not working
body: <p>I am having an issue with line-height that I cannot quite get my head around.</p>
  
  <p>The following code will center an image within a div:</p>
  
  <h3> CSS </h3>
  
  <pre><code>.bar {
      height: 800px;
      width: 100%;
      line-height:800px;
      background-color: #000;
      text-align: center; 
  }
  
  .bar img {
      vertical-align: middle;   
  }
  </code></pre>
  
  <h3> HTML </h3>
  
  <pre><code>&lt;div class="bar"&gt;
      &lt;img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, if I change the line height to 100%, then the line height does not take effect (or at least does not become 100% of the div).</p>
  
  <p><a href="http://jsfiddle.net/aUeJz/3/">Example jsfiddle</a></p>
  
  <p>Does anyone know what I am doing wrong?</p>