垂直對齊堆棧內容

我有一個div，當鼠標懸停在鏈接上時，它可以像工具提示一樣彈出。它在概念上有5行：一行文本，一個按鈕，一個分隔線，一行文本，一個按鈕。垂直對齊堆棧內容

---------------- 
| Click here: | 
| [Button1] | 
| ---------- | 
| Or Click Here: | 
| [Button2] | 
------- ------- 
     \/

每一行當前都是一個帶有圖像背景的div，它的內容都很正常。但是現在我們需要有條件地顯示頂部和底部按鈕的組合。如何將可見元素垂直居中放置在彈出窗格中，因爲「行」顯示或隱藏？彈出的div需要在頂部至少有20px的填充。

---------------- ---------------- 
|    ||    | 
| Or Click Here: || Click here: | 
| [Button2] || [Button1] | 
|    ||    | 
|    ||    | 
------- ------- ------- ------- 
     \/    \/

我讀過這樣的：http://www.boutell.com/newfaq/creating/centervertically.html但我不知道如何與多個堆疊的內容應用它。

來源

2011-11-30 xr280xr

我不完全明白你需要什麼....你是說你想讓彈出窗口像你顯示的第一個例子，除了隱藏的按鈕之一？或者你需要彈出只有一個按鈕，並垂直居中？ – bfink

對不起，我感到困惑。是的，所以它可以看起來像第一個，或者我可以隱藏其中一個按鈕，其相關文本和分隔線。在那一點上，我希望它自動調整以垂直居中剩餘的可見內容（我試圖在後面的兩個示例中展示）。 – xr280xr

我想我已經在WPF工作了很長時間了，我忘了DHTML是一個大黑客（至少我們現在使用它的事情）。記住後我決定爲什麼不再攻擊一些。我首先嚐試使用JavaScript來智能地重新計算頂部邊距，以便爲我的內容居中。由於IE無視標準，這太亂了。所以我最終使用JavaScript來換出div上的css類，以調整頂部和底部邊距，並使其看起來居中。儘管如此，我仍然有興趣聽到自動實現它的好方法。 – xr280xr

既然我已經使用JavaScript來顯示或隱藏的元素，我決定用它來設置對齊爲好。我首先嚐試使用JavaScript來智能地重新計算頂部邊距，以便爲我的內容居中。由於IE無視標準，這太亂了。所以我最終使用javascript來換出div上的css類，以便調整頂部邊距並使其看起來居中。該divs已經堆疊，所以如果我刪除頂部的div，其餘的增加。所以我交換的課程只是添加了適當的頂部邊距，以便將頂部div移到中心位置。

來源

2012-10-03 17:22:58 xr280xr

嘗試這種風格的div容器：

<div style='display:table-cell; vertical-align:middle'></div>

來源

2011-12-04 12:57:03

這沒有效果（至少在FireFox中）。不過謝謝。 – xr280xr

垂直對齊堆棧內容

回答

相關問題