javascript - 跨浏览器：如何根据视口高度调整元素的垂直位置？

Question

我有一堆我想要垂直居中的图标。这当然会有所不同，具体取决于屏幕分辨率等。我目前所做的是获得父 DIV 的高度，其大小为视口的 100%：

    var pageHeight = $('#sidebar').height();

然后，我得到图标容器的高度，因为这在 CSS 中没有预先确定：

    var socialDockHeight = (document.getElementById('social_dock_container').offsetHeight * numberOfIcons);

注意：这仅检索一个图标的高度，出于某种原因，可能是因为它们被编码在一个数组中？然后我计算新位置，并通过 jQuery 将其分配给元素：

    var y = (pageHeight / 2) - (socialDockHeight / 2);
    $("#social_dock_container").css({ 
            top: y + "px"
    }).show();

这适用于 Chrome，但不适用于 IE、FF 或 Safari。

score 0 · Accepted Answer

您想让您的图标始终位于屏幕中间吗？如果您的图标不是那么大，为什么不这样做：

#social_dock_container
{
    position: absolute;
    top: 50%;
}

编辑

正如 Zee Tee 提到的，您当然需要设置 margin-top 如下：

$("#social_dock_container").css('margin-top', '-' + socialDockHeight / 2 + 'px' );

score 0 · Accepted Answer

如果您不打算使用$(window).height()，请使用$('#sidebar').outerHeight();，因此您可以获得所有其他好东西，例如元素上的填充和边距。

也不要忘记用户何时调整其窗口大小。为此使用.resize();。

2 回答 2