Align text vertically at the bottom of the window?

Question

I made a field and I set the line height, the text is automatically vertically centered. Is there any way or any trick to set the text at the bottom of the window?

div { width: 100px; height: 100px; background: #eee; color: #333; text-align: center; line-height: 100px; vertical-align: text-bottom; } <div>FoxRox</div> 

Answer 1

Setting the height div and line-height text to the same value, 100px in your case, is a method of vertically centering the text in the div. This is problem.

Changed line-height and deleted uselessly vertical-align => it is displayed at the bottom http://dabblet.com/gist/2790000

Answer 2

Paste the text in the p tag using display:inline-block . Set vertical-align to the p element.

 <div> <p>FoxRox</p> </div>​ div { width: 100px; height: 100px; background: #eee; color: #333; text-align: center; } p { display: inline-block; vertical-align: -80px; }​ 

Demo

Answer 3

You can set the display to a table cell, try this CSS for example.

 width: 100px; height: 100px; display: table-cell; vertical-align: bottom; 

Demo: http://jsfiddle.net/Kawwr/

Answer 4

You can check my answer at fooobar.com/questions/116366 / ....

Below is a demo .

---

The trick is to use display: table-cell on an external container. That way you can use vertical-align: bottom and display: inline-block; in the div.