将文本放在 div 的底部

我有4个 DIV，它们都在屏幕中央。每个 div 中有两个单词，但是我不希望它们出现在顶部，我希望它们出现在 div 的右下角。我怎么能这么做？

291884 次浏览
小开
最佳答案

将文本用 span或类似形式包装起来，并使用以下 CSS:

.your-div {
position: relative;
}


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

如果你只有一行文本，而你的 div 有一个固定的高度，你可以这样做:

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

参见 小提琴。

小开 
<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/的工作实例

小开

我认为使用弹性框(兼容性)比使用绝对位置要好。

.container{
background-color:green;
height:500px;
  

/*FLEX BOX */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}


.elem1{
background-color:red;
padding:20px;
  

/*FLEX BOX CHILD */
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
 

}
<div class="container">
TOP OF CONTAINER
<div class="elem1">
Nam pretium turpis et arcu. Sed a libero. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci.


Mauris sollicitudin fermentum libero. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Quisque id mi.


Donec venenatis vulputate lorem. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Curabitur vestibulum aliquam leo.
</div>


</div>

小开

谢谢@Harry 以下代码对我很有用:

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

提交答案