把文字放在div的底部

Question

我有4个DIV正好相邻,它们都位于屏幕中间.我在每个div中有2个单词,但我不希望它们位于顶部,我希望它们出现在div的右下角.我怎样才能做到这一点？

Answer 1

将文本换行span或类似,并使用以下CSS ...

.your-div {
    position: relative;
}

.your-div span {
   position: absolute;
   bottom: 0;
   right: 0;
}

Answer 2

<div id="container">
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
    <div><span>Two Words</span></div>
</div>

#container{
    width:450px;
    height:200px;
    margin:0px auto;
    border:1px solid red;
}

#container div{
    position:relative;
    width:100px;
    height:100px;
    border:1px solid #ccc;
    float:left;
    margin-right:5px;
}
#container div span{
    position:absolute;
    bottom:0;
    right:0;
}

查看http://jsfiddle.net/7YTYu/2/上的工作示例

Answer 3

如果您只有一行文本且div具有固定高度,则可以执行以下操作:

div {
    line-height: (2*height - font-size);
    text-align: right;
}

看小提琴.

Answer 4

感谢@Harry，以下代码对我有用：

.your-div{
   vertical-align: bottom;
   display: table-cell;
}