Html 元件的垂直对齐不工作

我试图实现的是一组元素（框），里面有一个链接。此链接应位于右下角，但“垂直对齐”属性不起作用

jsFiddle：

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>

我还尝试了几种垂直对齐和绝对定位的组合，并在

a

-元素周围使用了包装器，目前还没有做任何尝试

问题

---

如何将链接定位在右下角，同时仍将

a

-元素扩展到整个正方形？

我将文本放置在跨度内，然后将该跨度绝对值放置在a内。Yhis可以轻松地将其设置为右下角

您的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;
}

---

举个例子：

我会把文本放在一个跨距内，然后将该跨距绝对值放在a内。Yhis可以轻松地将其设置为右下角

您的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;
}

---

例如：

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

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

---

jsIDLE:

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

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

---

jsIDLE:

这里有一种方法，使用定位：

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

，并为li使用

table cell

---

这里有一种方法，使用定位：

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

，并为li使用

table cell

---

您需要进行以下更改：

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

（演示：）

---

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

您需要进行以下更改：

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

（演示：）

---

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

我个人不喜欢仅仅为了对齐而引入额外的标记。@AndyG同意，但询问者明确表示，他希望他的链接占据整个

li

（这是有意义的），而您的答案并非如此。我不太喜欢

显示：表格-…

css，所以这是我的正确做法……我个人不喜欢仅仅为了对齐而引入额外的标记。@AndyG同意，但提问者明确表示他希望他的链接占据整个

li

（这是有意义的），而你的回答中不是这样。我不太喜欢

display:table-…

css，所以这是正确的方法。。。