动态垂直对齐

检查出页面：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

动态垂直对齐

回答

相关问题