Text to Bottom of Div - html

Question

Is there any way to get the content text of a div to the bottom of it?
Here I've prepared an example.
http://jsfiddle.net/JGuP7/
This is the sample hierarchy:
<div class="button">Button Label</div>
I'm trying to achieve the result without adding additional spans or changing the hierarchy.

Answer 1

Three possible solutions, although each has its own caveats.
jsFiddle demo
The first solution relies on line-height: 220px; vertical-align: bottom; to align the text with the bottom of the DIV. The second solution creates a :before psuedo-element that pushes the text to the bottom of the DIV (this requires no additional markup). Both solutions will fail in IE7 or earlier, and both will have issues if:
The font size changes
The text wraps to a second line
The size of the containing element changes
The third solution relies on the display: box; property, which is a CSS property that is being phased out (more details at Quick Hits With the Flexible Box Model). This solution is only supported by Chrome since v4, Firefox since v2, and IE10 beta. However, a new Flexbox standard has been standardized, but browser support is minimal. This solution could be considered "too new" to be used effectively (html5please.com/#flexbox).
Generally speaking, you should consider a new wrapping element around your text which will allow for position: absolute; bottom: 0; to cozy the element to the bottom of the parent element. This has the benefit of growing the child element upwards as the font size or text length increases, and is agnostic to the parent container's dimensions. Depending on how mission critical your positioning is to your layout, you could add this new element using Javascript. This probably isn't ideal given the question you've posed, but browser support isn't less than ideal for the more wacky CSS solutions I've listed above :-p

Answer 2

Another way to to do this would be by using "display: table-cell" and "vertical-align: bottom".
http://jsfiddle.net/JGuP7/1/
.button {
display: table-cell;
background-color: darkred;
color: white;
width: 120px;
height: 120px;
text-align: center;
vertical-align: bottom;
}

Answer 3

If you use position:relative in the container, and use
position:absolute;
bottom:0;
in the content, you can achieve the desired result.
Your CSS might look like:
.button
{
display: block;
background-color: darkred;
color: white;
width: 120px;
height: 120px;
text-align: center;
position: relative;
}
.bottomContent
{
position:absolute;
bottom: 0;
}
and your HTML:
<div class="button"><p class="bottomContent">Button Label</p></div>
Source