Вертикально выровнять текст в нижней части окна?

Question

Я сделал коробку, и я установил высоту линии, текст автоматически по центру. Есть ли способ или любой трюк, чтобы установить текст в нижней части окна?

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

<div>FoxRox</div> 

Answer 1

Установка height в DIV и line-height текста к тому же значению, 100px в вашем случае, это метод вертикально центрирования текста внутри DIV. Это проблема.

Изменено line-height и удалены бесполезно vertical-align => он отображается в нижней части Теперь http://dabblet.com/gist/2790000

Answer 2

Заключите текст в p тег с display:inline-block. Установите vertical-align на элемент p.

<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

Вы можете проверить мой ответ на https://stackoverflow.com/a/6116514/682480.

Вот demo для ответа на данный вопрос.

---

Хитрость заключается в том, чтобы использовать display: table-cell на внешнем контейнере. Таким образом, вы можете использовать vertical-align: bottom и display: inline-block; на div.

Answer 4

Вы можете установить отображение в ячейку таблицы, попробуйте этот CSS, например.

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

Демо: http://jsfiddle.net/Kawwr/