動態垂直對齊

檢查出頁面：http://www.blueclick.ca/projects/0755/html/動態垂直對齊

問題是 - 爲什麼它不是實際上垂直對齊？

表格單元格的垂直對齊屬性正在工作，但它似乎將我的內容的頂部對齊到中間而不是我的內容的中間。

如果您點擊最左側的聯繫人按鈕，您將看到最終目標 - 內容將首先關閉並居中，當內容切換滑出時，頁腳和標題將相互擴展而不僅僅是向下。

有人有任何見解提供？

感謝一如既往

來源

2011-12-22 sdo

你在找什麼來找你想要的內容最終？ – 1ftw1 2011-12-22 23:24:56

@ 1ftw1我要去的結果是50％的內容（包括標題）超過了頁面的中心，50％的數字低於這個數字。只是爲了垂直居中。我不能用絕對定位來做到這一點，因爲當我切換內容時，它只是向下滑動，然後> 50％的內容在屏幕的底部 - 我需要一個解決方案，它允許頁眉和頁腳被包裝在顯示器周圍：沒有內容持有div，向上和向下擴展，以便當內容是toggleSlide（）'d時整個事物保持居中。 – sdo 2011-12-23 02:54:12

答案：我已經將content div錯誤地包含在了header div中 - 因爲header的內容高度比內容小得多，它只集中了標題而不是內容（基於容器的高度等於它內部的一個對象 - 標題）。我把它拿出來，然後它按照想象重新調整大小。

來源

2011-12-23 03:02:23 sdo

它是垂直完全一致，只要我和谷歌鉻合金元素檢查可以告訴我。如果你想測試，以確保，做這樣的事情......

<script type="text/javascript"> 
    $(document).ready(function() { 
     var mid = $(window).height()/2; 
     var myDivMid = $("#navigation_holder").position().top - ($("#navigation_holder").height()/2) 

     alert(mid); 
     alert(myDivMid); 
    }); 
</script>

假設我沒有陷入困境，應該告訴你的窗口的中間值和您的div的中間值。

來源

2011-12-22 23:42:35

動態垂直對齊

回答

相關問題