元素的垂直对齐不起作用答案

【问题标题】：vertical-align of element not working元素的垂直对齐不起作用
【发布时间】：2013-06-30 05:52:36
【问题描述】：

我想要实现的是一组内部带有链接的元素（框）。这个链接应该在右下角，但是vertical-align属性不起作用

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-元素扩展到整个正方形？

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我会将文本放在一个跨度内，然后将该跨度绝对定位在 a.可以很容易地将其设置在右下角。

你的 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/

【讨论】：

我个人不喜欢仅仅为了对齐而引入额外的标记。
@AndyG 同意，但提问者明确表示他希望他的链接占据整个li（这是有道理的），而您的答案并非如此。我不是display: table-... css 的忠实粉丝，所以这是 IMO 正确的方法......

【解决方案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

【讨论】：

【解决方案4】：

您需要进行以下更改：

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

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

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

【讨论】：