Put text at bottom of div
I have 4 DIV's right next to each other, and they're all centered in the middle of the screen. I have 2 words in each div, but I don't want them at the top, I want them to appear in the bottom right hand corner of the div. How can I do this?
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;
}
Check working example at http://jsfiddle.net/7YTYu/2/
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.