How to align a label to the “BOTTOM” of a div in CSS?

Question

DEMO can be found at:

http://www.bootply.com/VZ7gvA7ndE#

I set the height of div to 100px and want to show the label at the bottom

Answer 1

vertical-align tends to work best when the containers are table/table-like elements (eg. table, tr, td, th) or inline text elements (eg span). However, because table elements for layout are not a good idea. We can make other elements function like them using the display:table; and display:table-cell; css properties.

Try applying the following css:

#contain-word-div {
  height: 100px;
  border: 1px solid black; /* added just for visualising position */
  display:table;
}
#contain-word-lab {
  display:table-cell;
  vertical-align: bottom;
  padding-bottom: 5px; /* use padding to give the label more height rather than trying to push the "cell" upwards */
}

DEMO

Answer 2

The "bottom" won't work anyway :) Try just bottom, without ". Plus your label needs a height too. Now it's auto height is used and this is exactly the font-size. I'd suggest adding a line-height: 100px; to your label.