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

它肯定不起作用，因为<a>锚是内联标记，因此分配它们的高度和宽度是没用的。 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

听起来你只需要摆脱锚标签上的高度规则，并在padding-top: 45px

上使用li之类的内容

如果有预定义的高度，如何在底部放置文本！

5 个答案: