元素的垂直对齐不起作用

Question

我想要实现的是一组内部有链接的元素（盒子）。此链接应位于右下角，但vertical-align属性不起作用

jsFiddle：http://jsfiddle.net/4JMav/

HTML

<ul>
    <li><a href="#">TEST 1</a></li>
    <li><a href="#">TEST 2</a></li>
    <li><a href="#">TEST 3</a></li>
    <li><a href="#">TEST 4</a></li>
    <li><a href="#">TEST 5</a></li>
    <li><a href="#">TEST 6</a></li>
    <li><a href="#">TEST 7</a></li>
</ul>

CSS

ul li
{
    display: inline-table;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
}
ul li a
{
    text-align: right;
    vertical-align: bottom;
    display: block;
    height: 100%;
    padding: 10px;
}

我还尝试了几种垂直对齐和绝对定位的组合，也使用a - 元素周围的包装器，但还没有付出努力。

问题

如何在右下角放置链接，同时仍在整个广场上展开a - 元素？

Answer 1

我会将文本放在一个范围内，然后将该范围放在一个绝对范围内。这样可以很容易地将它设置在右下角。

你的css看起来像这样：

ul li {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
}
ul li a {
    display: block;
    height: 100%;
    position: relative;
}
ul li a span {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

和一个例子：http://jsfiddle.net/E2kfd/

Answer 2

垂直对齐仅适用于表格单元格：

ul li a {
text-align: right;
vertical-align: bottom;
display: table-cell;
height: 100%;
padding: 10px;
}

JSFiddle：http://jsfiddle.net/4JMav/8/

Answer 3

这是一种使用定位的方法：

ul li
{
    display: inline-table;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
}
ul li a
{
    text-align: right;
    display: inline-block;
    padding: 10px;
    position: absolute;
    bottom: 0; right: 0;
}

就个人而言，我可能会给予ul display: inline-table并使用table-cell作为li。

jsfiddle

Answer 4

您需要进行以下更改：

ul li a
{
    ...
    display: table-cell;
    ...
}

（演示：http://jsfiddle.net/4JMav/6/）

垂直对齐对表格单元格和其他任何东西的工作方式不同：第一种，它对齐内容，另一种情况，它对齐行框中元素的文本内容。如果将块放入（内联）表中，则CSS渲染器将生成具有默认垂直对齐的anonymous table cell并将块放入其中。但是当您将内部元素本身转换为表格单元格时，它会应用您设置的垂直对齐。