title: Can't get image to align to bottom of div with Foundation block-grid class
body: <p>I am using Foundation 4.0 framework, and I have a block grid I am trying to create.  Each <code>li</code> contains an image with a fixed width but the height is not the same for all images.  I need the images and text to align to the bottom of the div.  Below is my html.  I have tried changing the parent div to position relative and position absolute, but cannot get anything to work.  Any help is greatly appreciated.</p>
  
  <p>CSS:</p>
  
  <pre><code>li {
      display:inline-block;
      vertical-align: bottom;
      text-align: center;
  }
  img {
    max-width: 127px;
    height: auto;
    margin-bottom: 0.7em;
  }
  
  // All other styles are defined by the ul.large-block-grid-4 within Foundation.
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="card-shadow-wrapper"&gt;
    &lt;ul class="small-block-grid-2 large-block-grid-4"&gt;
      &lt;li&gt;
        &lt;a href="http://example.com"&gt;
          &lt;img class="cover" src="image1.png"&gt;
          &lt;p&gt;Book 1 Title&lt;/p&gt;
          &lt;p&gt;Some Cool Author&lt;/p&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="http://example.com"&gt;
          &lt;img class="cover" src="image2.png"&gt;
          &lt;p&gt;Book 2 Title&lt;/p&gt;
          &lt;p&gt;Some Cool Author&lt;/p&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="http://example.com"&gt;
          &lt;img class="cover" src="image3.png"&gt;
          &lt;p&gt;Book 3 Title&lt;/p&gt;
          &lt;p&gt;Some Cool Author&lt;/p&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="http://example.com"&gt;
          &lt;img class="cover" src="image4.png"&gt;
          &lt;p&gt;Book 4 Title&lt;/p&gt;
          &lt;p&gt;Some Cool Author&lt;/p&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;  
  </code></pre>