CSS：替代垂直對齊？

有沒有其他選擇垂直對齊？CSS：替代垂直對齊？

對於使用垂直對齊，我不得不將顯示設置爲表格單元格。當我將顯示設置爲table-cell時，我設置的div的高度不起作用。我有overflow-y設置爲該div的自動。我想要做的是對齊從div的底部的div內的內容...我無法做到這一點..任何替代品？

這就是我現在所擁有的：

#container{ 
height:375px; 
border:1px solid #000; 
position:relative; 
overflow-y:auto; 
display:table-cell; 
vertical-align:bottom; 
} 

#container > div{ 
margin:0; 
margin-bottom:5px; 
width:660px; 
position:relative; 
}

來源

2013-11-22 user1763032

使用顯示：塊;和填充，保證金。 –

如果你發佈你的代碼，我們可以'垂直對齊'工作:)也可以使用絕對定位或填充。 – nkmol

有2個選擇，一個是設置line-height ..和另一種是父元素設置爲position: relative;和比你的子元素設置爲position: absolute;後來，使用top: 50%;和left: 50%;和比扣除這將是總height和absolute元件本身的width的1/2的邊緣...

.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; /* Assuming height of the element is 200 */ 
    margin-left: -200px; /* Assuming width of the element is 400 */ 
}

這裏有一個catch雖然，使用absolute會要求你試圖align垂直center

垂直對齊使用元素的元素的固定尺寸display: table-cell;

Demo

.parent { 
    height: 200px; 
    background: #eee; 
    display: table-cell; 
    width: 300px; 
    vertical-align: bottom; 
} 

.child { 
    height: 20px; 
    background: #aaa; 
}

另外它會被打賭如果您使用display: table;作爲包裝元素。

來源

2013-11-22 11:13:27

我會這樣做..但問題是我有不止一個div在容器內... – user1763032

您在jsfiddle演示中給出的代碼完美工作..感謝您的答案.. – user1763032

@ user1763032您歡迎:) –

嘗試：

#container{ 
height:375px; 
line-height:375px; 
} 

#container > div{ 
display:inline-block; 
line-height:1; 
}

來源

2013-11-22 11:19:00

這是唯一的「黑客」模仿「表格單元」正確，因爲它與任何長度的文本工作。 – lepe

CSS：替代垂直對齊？

回答

相關問題