css – 将文本对齐到div的底部

前端之家收集整理的这篇文章主要介绍了css – 将文本对齐到div的底部前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图将我的文本对齐到一个div从其他帖子和答案的底部stackoverflow我学会了处理这与不同的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以折叠的方式),文本写在它旁边。如何防止div折叠,但宽度适合文本?

解决方法

如果你想把文本对齐到底部,你不必写那么多的属性,使用display:table-cell; with vertical-align:bottom;足够

Demo

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

猜你在找的CSS相关文章