Text to Bottom of Div

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