title: <img> in <div> won't vertical-align:middle, why?
body: <p>we have CSS:</p>
  
  <pre><code>#left,#right{width:450px;height:450px;}
  #left{position:absolute;left:20px;top:30px;}
  #right{position:absolute;left:420px;top:30px;float:center;}
  
  #left img, #right img{float:center; vertical-align:middle;cursor:pointer}
  </code></pre>
  
  <p>Image is horizotal centered, but gets top aligned (i want middle)</p>
  
  <p>html looks <strong>like</strong></p>
  
  <pre><code>&lt;div id="media"&gt;
      &lt;div id="left"&gt;&lt;img/&gt;&lt;/div&gt; &lt;div id="right"&gt;&lt;img/&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any idea what i'm doing wrong?</p>
  
  <p>By the way, all this problem it's because i'm <a href="http://anulekha.net/?view=Collections&amp;Lookbook=2011" rel="nofollow">displaying</a> images with different resolutions :S</p>
  
  <h2>EDIT</h2>
  
  <p>This didn't help... :(</p>
  
  <pre><code>#left,#right{width:450px;line-height:450px;}
  #left{position:absolute;left:20px;top:30px;}
  
  #right{position:absolute;left:420px;top:30px;float:center;}
  #left img,#right img{cursor:pointer;}
  </code></pre>