将文本对齐到 div 元素底部

Question

我尝试将我的文字对齐到一个 div 的底部，从 Stack Overflow 的其他帖子和答案中学到了用不同的 CSS 属性来处理这个问题。但我做不到。基本上我的 HTML 代码是这样的:

<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
  <span style='position:absolute; bottom:0px;'>A Text</span>
</div>

的效果是，在FF中我只得到了一条垂直线（以折叠方式显示的div），文本是在它旁边写的。如何防止

折叠，同时使宽度适应文本？

- parascus

Answer 1

Flex方案

如果你想使用display: table-cell的方法也是可以的。但是，我们有更好的方法来实现相同的效果，即使用display: flex;。 flex是一种具有良好支持的技术。

.wrap {
  height: 200px;
  width: 200px;
  border: 1px solid #aaa;
  margin: 10px;
  display: flex;
}

.wrap span {
  align-self: flex-end;
}

<div class="wrap">
  <span>Align me to the bottom</span>
</div>

在上面的例子中，我们首先将父元素设置为 display: flex;，然后使用 align-self 将其设置为 flex-end。这可以帮助您将项目推到 flex 容器的末尾。

---

旧解决方案（如果不想使用 flex）

如果要将文本对齐到底部，则不必写那么多属性，只需使用 display: table-cell; 和 vertical-align: bottom; 即可。

div {
  display: table-cell;
  vertical-align: bottom;
  border: 1px solid #f00;
  height: 100px;
  width: 100px;
}

<div>Hello</div>

(或者JSFiddle)

- Mr. Alien

---

太棒了！就是这样！即使我必须省略宽度属性以使div适应内容，它也可以正常工作。谢谢！ - parascus

@parascus 它可以为您节省许多您一直在尝试的属性.. 不用谢 :) - Mr. Alien

@blackhawk 如果您的父包装器设置为 inline-block，为什么要使用此解决方案？这是专门针对可以使用 display: table-cell; 的人。 - Mr. Alien

绝妙的解决方案！ - f055

Answer 2

使用 Flexbox，现在你可以这样做：justify-content: flex-end

div {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 150px;
  height: 150px;
  border: solid 1px red;
}
  

<div>
  Something to align
</div>

查看 Caniuse 以确定是否适合使用 Flexbox。

- Zequez

---

你知道用这种方法如何将内容对齐到左下角吗？ - Preston Badeer

@PrestonBadeer 只需使用 justify-content: flex-start; 或将其完全删除。 - Zequez

如何将文本居中显示？ - kkkk00999

@kkkk00999 尝试使用 justify-content: center。 - Zequez

抱歉，我没有意识到您已经提供了一个Flex解决方案。我添加了一个类似的，因为我的解决方案已经过时了。有人评论说是时候更新了，所以我想更新一下。希望您不介意。 - Mr. Alien