title: Vertically align Unordered List with images and text that is displayed below the image?
body: <p>Ok, so I need some help in vertically aligning an unordered list with images and text all inside the same element. The image should align vertically with the text directly below it.</p>
  
  <p><em>Here is my code:</em></p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;div id="sidetrans"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a data-ftrans="slide" href="slide2.html"&gt;iPhone 1&amp;2&lt;img alt="next"      src="images/iphone1.png" height="115" width="87" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-ftrans="slide" href=""&gt;iPhone 3G&lt;img alt="next" src="images/iphone1.png" height="115" width="87" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-ftrans="slide" href=""&gt;iPhone 3GS&lt;img alt="next" src="images/iphone1.png" height="115" width="87" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-ftrans="slide" href=""&gt;iPhone 4&lt;img alt="next" src="images/iphone1.png" height="115" width="87" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-ftrans="slide" href=""&gt;iPhone4S&lt;img alt="next" src="images/iphone1.png" height="115" width="87" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-ftrans="slide" href=""&gt;iPhone5&lt;img alt="next" src="images/iphone1.png" height="115" width="87" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#sidetrans {
  padding-top:15px;
  text-align:left;}
  
  #sidetrans a{
  padding:0; }
  
  #sidetrans a img{
   vertical-align: text-bottom;   }
  
  #sidetrans ul li{
  display:inline;
  list-style: none;}
  </code></pre>