title: Vertical Align Text Under Image in Div Box?
body: <p>I have rows of product thumbnails with the product text below. See <a href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/" rel="nofollow">here</a></p>
  
  <p>Since the images have different heights the text is not always vertically aligned in the right place. I just changed the layout from tables to divs because it's easier and more modern.</p>
  
  <p>I've worked through several examples, websites, and this site but still haven't found a way to align this correctly. I'd like the image aligned in the middle of the div and the text at the very bottom. </p>
  
  <p>Here's the DIV code (very simple):</p>
  
  <pre><code>&lt;div style="float:left; width:210px; height:200px; text-align:center;" &gt;
      &lt;a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/"&gt;&lt;img  alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" /&gt;&lt;/a&gt;
  Alton Banquette
  &lt;/div&gt;
  </code></pre>
  
  <p>It works fine on <a href="http://test.pillarsoflifebook.com/ottomans/" rel="nofollow">this page</a> since the images are all the same height</p>
  
  <p>Is there a simple solution to this? I like DIVS better but this wasn't a problem when everything was table cells since I could use <code>valign=center</code>, etc.</p>
  
  <p>Thank you!</p>