title: vertically align img inside floated div
body: <p>There are 5 floated <code>div</code>s which heights are stretched to 100% of <code>document</code> height using Javascript. All 5 of them contain <code>img</code> element.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link type="text/css" rel="stylesheet" href="style.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="static"&gt;&lt;img src="http://www.rs.dhamma.org/wheel.gif"/&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="http://www.rs.dhamma.org/wheel.gif"/&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="http://www.rs.dhamma.org/wheel.gif"/&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="http://www.rs.dhamma.org/wheel.gif"/&gt;&lt;/div&gt;
          &lt;div class="clear"&gt;&lt;img src="http://www.rs.dhamma.org/wheel.gif"/&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>
  
  <p>Javascript: </p>
  
  <pre><code>//sets columns height to 100%;
  function colsHeight(){
          var docHeight = $(document).height();
          $("#wrapper div").height(docHeight);
  };
  
  $(document).ready(function(){
      colsHeight();
      });
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>*{
      margin: 0;
      padding: 0;    
      }
  
  #wrapper{
   width: 1000px;
   margin: 0 auto;    
      }
  
      #wrapper div{    
          padding: 0 20px;
          background-color: #9F81F7;        
          float: left;
          border-right: 1px solid black;
      }
      #wrapper img{
  
      }
  
  div.clear:after{
      content: " ";
      clear: both;
      }
  </code></pre>
  
  <p>​I've tried setting parent's <code>div</code> <code>display: table</code> and <code>img</code> <code>display: table-cell, vertical-align: middle</code> but no luck. Defining <code>margin-top: 50%</code> is acting anything but expected.</p>
  
  <p><a href="http://jsfiddle.net/3gqcS/1/" rel="nofollow"><strong>JSFIDDLE HERE!!!</strong></a></p>
  
  <p>Any help appreciated.<br>
  Thanks!</p>