在子div中垂直對齊文本

Question

我正在嘗試將child div中的文本垂直對齊到parent div框的底部。

http://jsfiddle.net/sUS8D/

有人可以協助嗎？

謝謝，

Answer 1

查看演示

您需要像這樣調整CSS：

.parent {
    float:left;
    width:200px;
    height:400px;
    border: solid 1px;   
    position:relative;
}

.child {
    vertical-align:bottom;
    bottom:0;
    position:absolute;
    right:0;
}

Answer 2

您還可以使用：

.child {
    display: table-cell;
    vertical-align: middle;
}

與復雜的CSS hacks相比，我還是比較喜歡這種方法（Sarfraz-坦白地說，即使看着您的代碼的開發人員出生於CSS，也需要閱讀兩次）。

當然，存在跨瀏覽器的含義。 您決定要調試CSS規則的兩行還是叢林。

Answer 3

@Sarfraz首先到達那里，所以我的補丁已保存為修訂版4 http://jsfiddle.net/sUS8D/4/ （減去浮點數）