将文本垂直对齐到框的底部？

Question

我制作了盒子,我设置了行高,文本自动垂直居中.有没有办法或任何一种技巧来设置框底部的文字？

div {
    width: 100px;
    height: 100px;
    background: #eee;
    color: #333;
    text-align: center;
    line-height: 100px;
    vertical-align: text-bottom;
 }

<div>FoxRox</div>

Answer 1

将heightdiv和line-height文本设置为相同的值,在您的情况下为100px,是一种在div中垂直居中文本的方法.那就是问题所在.

更改line-height并删除无用vertical-align=>它现在显示在底部http://dabblet.com/gist/2790000

Answer 2

用文本将文本括在p标签中display:inline-block.设置vertical-align为p元素.

<div>
    <p>FoxRox</p>
</div>?

div {
    width: 100px;
    height: 100px;
    background: #eee;
    color: #333;
    text-align: center;
 }
p {
    display: inline-block;
    vertical-align: -80px;
}
?

演示

Answer 3

您可以将显示设置为table-cell,例如尝试此CSS.

width: 100px; 
height: 100px; 
display: table-cell; 
vertical-align: bottom;

演示:http://jsfiddle.net/Kawwr/