Align text to the bottom of a div

I tried to align my text to the bottom of a div from other posts and answers in stackoverflow 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>

---

您现在可以使用Flexbox justify-content: flex-end来做到这一点justify-content: flex-end now：

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

<div>
  Something to align
</div>

链接地址: http://www.djcxy.com/p/75790.html

上一篇: Escape </脚本标记内容

下一篇: 将文本对齐到div的底部