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

问题描述

我试图将我的文本对齐到其他帖子和答案的底部stackoverflow我学会了处理这与不同的CSS属性。但我不能做到。基本上我的 html 代码如下：

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>

效果是在FF我只是得到垂直线文本被写在它旁边。如何防止 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?

推荐答案

如果你想把文本对齐到底部，你不必写那么多的属性，使用 display：table-cell; code> vertical-align：bottom; 够了

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的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！