title: How do you vertically align images within a list or a div?
body: <p>I have the following code for showing some images:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="footer-logos"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;img src="/sites/default/files/imagefield_thumbs/All Ears Cambodia Logo_1.png" alt="" class="first"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="/sites/default/files/imagefield_thumbs/MLF rev.jpg" alt="" class=""&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="/sites/default/files/imagefield_thumbs/TAMTF A.jpg" alt="" class=""&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="/sites/default/files/imagefield_thumbs/unltd-logo.png" alt="" class=""&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="/sites/default/files/imagefield_thumbs/CECILYS HIGH RES.jpg" alt="" class=""&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="/sites/default/files/imagefield_thumbs/Street Child Africa.jpg" alt="" class="last"&gt;&lt;/li&gt;     
          &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.footer-logos {text-align:center;}
  .footer-logos img {margin-left:20px;margin-right:20px;}
  .footer-logos img.first {}
  .footer-logos img.last {}
  .footer-logos ul {}
  .footer-logos ul li {display: inline; list-style:none;}
  </code></pre>
  
  <p>This produces images that look like:</p>
  
  <p><a href="http://labs.dante-studios.com/footer-logos-normal.jpg">alt text http://labs.dante-studios.com/footer-logos-normal.jpg</a></p>
  
  <p>But i would like it to center the logos vertically so it looks like:</p>
  
  <p><a href="http://labs.dante-studios.com/footer-logos-fixed.jpg">alt text http://labs.dante-studios.com/footer-logos-fixed.jpg</a></p>
  
  <p>I've tried vertically aligning everything through CSS but that doesn't really work unless i'm using a table.  So anyway i can get the desired effect without using a table row?</p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>The images that are produced can be of different heights, thus cannot use a fixed height css element...</p>