当有预定义高度时如何将文本放置在底部！

Question

这应该是非常微不足道的事情，但事实并非如此。我有一个预定义的锚点高度，我想将文本放置在底部。

<li><a class="my-text">My Text</a></li>

我使用了以下 CSS，但不起作用。文本仍然显示在顶部。

a.my-text {
     background-color:#cccc;
     height:50px;
     vertical-align:bottom;
     width:100px;
}

我的想法是：我想将文本对齐到底部，但是如果有超过一行的文本，我希望溢出到顶部，而不是将其他所有内容推到下面......关于如何做到这一点的任何想法能够实现吗？

Answer 1

使用 css 和您提供的 html 无法完成此操作。如果你在锚点上加一个额外的跨度，可以做到：

a.my-text {
  height: 50px;
  display: block;
}
a.my-text span {
  position: absolute;
  bottom: 0;
}

Answer 2

您可以在锚点中使用 bottom:0px 和 position:absolute 。

HTML

<li><a class="my-text">My Text</a></li>

CSS

li {
    position: relative;
    height:200px;
    border: 1px solid red;
}

a.my-text {
    bottom: 0px;
    border: 1px solid blue;
    position: absolute;
    background-color:#cccc;
    width:100px;
    height:50px;
}

参见jsfiddle。

Answer 3

它肯定行不通，因为 锚点是内联标签，因此为它们分配高度和宽度是没有用的。 vertical-align 属性确定内联元素相对于其所在行的位置，而不是文本的垂直位置。 （请参阅http://reference.sitepoint.com/css/vertical-align）据我了解，您所要求的事情无法完成。然而，如上所述，还有其他替代方案可以实现类似的效果。

Answer 4

您的代码的问题是锚点不会响应高度/宽度，因为它是内联元素。如果您将 {display: block} 添加到锚点，它现在是一个块元素，但是，据我记得，vertical-align 不适用于块元素。这是我能想到的使用 display: table-cell 的最简单方法。

a.my-text {
  background-color: #ccc;
  height: 200px; width: 100px;
  vertical-align: bottom;
  display: table-cell;
}

Answer 5

听起来您只需要摆脱锚标记上的高度规则并在 li 上使用类似 padding-top: 45px 的内容即可