title: Vertically center li's with different heights
body: <p>I'm trying to create rows of images, with 3 images in each row. All this data is dynamic, but below is some example HTML and CSS:</p>
  
  <pre><code>ul { margin: 0; padding: 0; list-style: none; width: 900px; }
  
  li { margin: 0; padding: 0; width: 280px; display: inline-block;
       text-align: center; }
  
  &lt;ul&gt;
      &lt;li&gt;&lt;img src="http://i.imgur.com/FcRwL.png" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://i.imgur.com/VLwWb.png" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://i.imgur.com/euevl.png" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://i.imgur.com/VLwWb.png" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://i.imgur.com/euevl.png" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://i.imgur.com/FcRwL.png" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here it is in jsFiddle: <a href="http://jsfiddle.net/ZxPG3/" rel="nofollow">http://jsfiddle.net/ZxPG3/</a></p>
  
  <p>So my problem is that all the images appear to be vertically-aligned at the bottom. This happens because the height of the <code>li</code> is equal to the image contained inside - it doesn't equal the height of the <code>ul</code>. I can't set the height of the <code>li</code> to a specific value, since I never know what the height of the images will be.</p>
  
  <p>Is there a way to set the <code>li</code> to equal the height of the <code>ul</code>, and then vertically center the image inside?</p>