将文本与 div 的底部对齐 [英] Align text to the bottom of a div

问题描述

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

<div style='height:200px;向左飘浮;边框:1px 实心 #ff0000;位置:相对;'><span style='position:absolute;bottom:0px;'>A Text</span>

效果是在 FF 中我只得到垂直线(折叠方式的 div)并且文本写在它旁边.如何防止 div 折叠但宽度适合文本?

解决方案

Flex Solution

如果您想使用 display: table-cell 解决方案，那完全没问题.但是，我们有一个更好的方法来完成相同的操作，而不是使用 display: flex;.flex 具有体面的支持.

.wrap {高度:200px；宽度:200px；边框:1px 实心 #aaa;边距:10px；显示:弹性；}.wrap 跨度 {align-self: flex-end;}

<span>将我与底部对齐</span>

在上面的例子中，我们首先将父元素设置为 display: flex; 然后我们使用 align-self 到 flex-end.这有助于您将项目推送到 flex 父级的末尾.

<小时>

旧解决方案(如果您不愿意使用flex，则有效)

如果要将文本对齐到底部，则不必为此编写这么多属性，使用 display: table-cell; 和 vertical-align:bottom; 就够了

div {显示:表格单元格；垂直对齐:底部；边框:1px 实心 #f00;高度:100px；宽度:100px；}

你好

(或 JSFiddle)

I tried to align my text to the bottom of a div from other posts and answers in Stack Overflow I learned to handle this with different CSS properties. But I can't get it done. Basically my HTML code is like this:

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

The effect is that in FF I just get vertical line (the div in a collapsed way) and the text is written next to it. How can I prevent the div collapsing but having the width fitting to the text?

解决方案

Flex Solution

It is perfectly fine if you want to go with the display: table-cell solution. But instead of hacking it out, we have a better way to accomplish the same using display: flex;. flex is something which has a decent support.

.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>

In the above example, we first set the parent element to display: flex; and later, we use align-self to flex-end. This helps you push the item to the end of the flex parent.

---

Old Solution (Valid if you are not willing to use flex)

If you want to align the text to the bottom, you don't have to write so many properties for that, using display: table-cell; with vertical-align: bottom; is enough

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

<div>Hello</div>

(Or JSFiddle)

这篇关于将文本与 div 的底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！