title: text at the bottom of span
body: <p>I have something like this</p>
  
  <pre><code>&lt;td&gt;
      &lt;a href="#"&gt;
          &lt;span class="foo"&gt;
               Link Text
          &lt;/span&gt;
      &lt;/a&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>and I have </p>
  
  <pre><code>.foo
  {
      height: 90px;
      display: inline-block;
      background: #e8edff url('foo.png') top center no-repeat;
      vertical-align: bottom;
  }
  </code></pre>
  
  <p>and it renders something like this (with the background image)</p>
  
  <pre><code> ________________
  |    Link Text   |
  |                |
  |                |
  |                |
  |                |
  |________________|
  </code></pre>
  
  <p>How can i make it so I renders like this?</p>
  
  <pre><code> ________________
  |                |
  |                |
  |                |
  |                |
  |    Link Text   |
  |________________|
  </code></pre>
  
  <p>The requirement is the every cell has to have a hyperlink and a background image and some text at the bottom.</p>
  
  <p>Thanks</p>
  
  <p>EDIT: here's a <a href="http://jsfiddle.net/yBKZS/" rel="noreferrer">jsfiddle link</a> of what I'm trying to do.</p>