Wrap the text in a span or similar and use the following CSS:
.your-div {
position: relative;
}
.your-div span {
position: absolute;
bottom: 0;
right: 0;
}
<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;
}
If you only have one line of text and your div has a fixed height, you can do this:
div {
line-height: (2*height - font-size);
text-align: right;
}
See fiddle.
Thanks @Harry the following code works for me:
.your-div{
vertical-align: bottom;
display: table-cell;
}
I think that's better to use flex boxes (compatibility) than the absolute position. Here's example from me in pure css.
.container{_x000D_
background-color:green;_x000D_
height:500px;_x000D_
_x000D_
/*FLEX BOX */_x000D_
display: -ms-flexbox;_x000D_
display: -webkit-flex;_x000D_
display: flex;_x000D_
-webkit-flex-direction: column;_x000D_
-ms-flex-direction: column;_x000D_
flex-direction: column;_x000D_
-webkit-flex-wrap: nowrap;_x000D_
-ms-flex-wrap: nowrap;_x000D_
flex-wrap: nowrap;_x000D_
-webkit-justify-content: flex-start;_x000D_
-ms-flex-pack: start;_x000D_
justify-content: flex-start;_x000D_
-webkit-align-content: stretch;_x000D_
-ms-flex-line-pack: stretch;_x000D_
align-content: stretch;_x000D_
-webkit-align-items: flex-start;_x000D_
-ms-flex-align: start;_x000D_
align-items: flex-start;_x000D_
}_x000D_
_x000D_
.elem1{_x000D_
background-color:red;_x000D_
padding:20px;_x000D_
_x000D_
/*FLEX BOX CHILD */_x000D_
-webkit-order: 0;_x000D_
-ms-flex-order: 0;_x000D_
order: 0;_x000D_
-webkit-flex: 0 1 auto;_x000D_
-ms-flex: 0 1 auto;_x000D_
flex: 0 1 auto;_x000D_
-webkit-align-self: flex-end;_x000D_
-ms-flex-item-align: end;_x000D_
align-self: flex-end;_x000D_
_x000D_
}<div class="container">_x000D_
TOP OF CONTAINER _x000D_
<div class="elem1">_x000D_
Nam pretium turpis et arcu. Sed a libero. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci._x000D_
_x000D_
Mauris sollicitudin fermentum libero. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Quisque id mi._x000D_
_x000D_
Donec venenatis vulputate lorem. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Curabitur vestibulum aliquam leo._x000D_
</div>_x000D_
_x000D_
</div>Source: Stackoverflow.com