WP7-如何使用JavaScript在Web浏览器中垂直居中放置div

Question

我在WP7论坛上尝试了此操作，却一无所获...

我正在生成一个相当简单的html文档，其所有内容都在div中。 我需要在webbrowser控件中将div垂直居中。 带有“ display：table”的外部div和带有“ display：table-cell”的内部div的通常方法在WP7-IE中不起作用，因此我使用了javascript。 这个非常简单的js函数可在桌面浏览器上运行：

    function setContent() {
        var windowHeight = document.documentElement.clientHeight;
        if (windowHeight > 0) {
            var contentElement = document.getElementsByClassName('DivToCenter')[0];
            var contentHeight = contentElement.offsetHeight;

            if (windowHeight - contentHeight > 0) {
                contentElement.style.position = 'relative';
                contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
                window.external.Notify('' + ((windowHeight / 2) - (contentHeight / 2)));
            }
            else {
                contentElement.style.position = 'static';
            }
        }
    }
    window.onload = function() {
        setContent();
    }
    window.onresize = function() {
        setContent();
    }

此功能的结果是，在webbrowser控件中div显得太低，好像视口的高度大于实际高度。 我从javascript中拉出了视口的大小，并注意到它与WebBrowser.ActualHeight属性相同。 因此，我现在的工作假设是，报告给javascript的视口的大小以xaml逻辑像素为单位，这弄乱了算法。 那就是我关于假肢的最佳理论。

Answer 1

您可能应该看一下这样的帖子： http : //blogs.msdn.com/b/iemobile/archive/2011/01/21/managing-the-browser-viewport-in-windows-phone-7 .aspx ，讨论WP7中的视口大小。