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 link。

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/

Answer 2

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

除了两种情况外，

vertical-align将无法执行您想要的操作：在表格元素上，或在图像上（或附近）。请参阅：http://phrogz.net/css/vertical-align/index.html

Answer 3

将其添加到td代码<td valign="bottom">

<强>更新

以下是您要找的内容：

http://jsfiddle.net/yBKZS/3/

更新2

如果您不需要将图像作为背景，则可以执行以下操作：

http://jsfiddle.net/yBKZS/8/

跨度底部的文本

3 个答案: