跨度底部的文本

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 链接。

原文由 Professor Chaos 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 sandeep 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将 vertical-align: bottom; 放在 TD 而不是 SPAN 。

vertical-align 不会做你想做的，除了两种情况：在表格元素上，或在（或靠近）图像上。请参阅：http: //phrogz.net/css/vertical-align/index.html

原文由 Ariel 发布，翻译遵循 CC BY-SA 3.0 许可协议