跨度底部的文本

Question

我有类似的东西

<td>
    <a href="#">
        <span class="foo">
             Link Text
        </span>
    </a>
</td>

我有

.foo
{
    height: 90px;
    display: inline-block;
    background: #e8edff url('foo.png') top center no-repeat;
    vertical-align: bottom;
}

并呈现这样的东西(带背景图片)

 ________________
|    Link Text   |
|                |
|                |
|                |
|                |
|________________|

我怎么能这样做,所以我这样渲染？

 ________________
|                |
|                |
|                |
|                |
|    Link Text   |
|________________|

要求是每个单元格必须具有超链接和背景图像以及底部的一些文本.

谢谢

编辑:这是我正在尝试做的一个jsfiddle链接.

Answer 1

给出vertical-align: bottom; 的TD,而不是span

编辑:这样写

.foo
{
    height: 50px;
    background: #e8edff url('http://www.emblemmart.com/emblems-badges-insignias/media/logos/medium/BMW.gif') top center no-repeat;
    display:table-cell;
    vertical-align:bottom;

}

检查这个http://jsfiddle.net/sandeep/yBKZS/1/