在页面上居中元素的问题

时间:2014-01-29 17:17:20

标签: javascript jquery html5

我写了一个函数来将一个元素置于用户的屏幕中间:

function positionElmentAtCenterOfUserWindow(elementId){

    var userBrowserWidth = $(window).width();
    var userBrowserHeight = $(window).height();
    var elementWidth = elementId.width();
    var elementHeight = elementId.height();
    var marginRight = (userBrowserWidth - elementWidth) / 2 +'px';
    var marginTop = (userBrowserHeight - elementHeight) / 2 +'px';

    console.log(userBrowserWidth+'-'+elementWidth+' * '+userBrowserHeight+'-'+elementHeight);
    elementId.css('position','absolute');
    elementId.css('top',marginTop);
    elementId.css('right',marginRight);

}

当DOM准备就绪时,我在演示文稿中启动此功能。

$(document).ready(function() {

    positionElmentAtCenterOfUserWindow($("#presentation"));

});

用户窗口的大小始终向右返回,但elementWidth和elementHeight正在从页面刷新更改,从而导致危险行为。

这可以在我的网站上直接测试:idealmenu.ch

5 个答案:

答案 0 :(得分:0)

这基本上是一回事。如果有的话,你可以使用脚本来计算top和margin-top值以适应不同的高度。无需窗口大小值。

#presentation {
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -160px;
}

答案 1 :(得分:0)

哈!我已经为项目创建了这个函数。它使用纯Javascript。玩得开心!

function positionElmentAtCenterOfUserWindow(elementId){
 var main = document.getElementById('elementId');
 var wi=main.offsetWidth;
 var he=main.offsetHeight;
 var marginleft = wi / 2;
 var margintop = he / 2;
 main.style.marginLeft="-" + marginleft;
 main.style.marginTop="-" + margintop;
 main.style.position="absolute";
 main.style.left="50%";
 main.style.top="50%"
}

答案 2 :(得分:0)

如果您不关心IE7 / 8

,可以在CSS中执行此操作

jsfiddle.net/W26mt

#presentation {
    position: absolute;
    left: 50%;
    top: 50%;
    -moz-transform: translate(-50%, -50%);
    -m-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

答案 3 :(得分:0)

您可以使用此CSS将div放在屏幕中间。像创业板一样工作,即使在ie8

#yourDiv{
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

答案 4 :(得分:0)

试试这里 - > http://jsfiddle.net/Wbykp/1/] 1

删除JS代码并应用此CSS。

#sectionCentre
{
   margin: 20% auto auto;    
}

JS可能并不总是获得正确的宽度/高度,换句话说,您可能能够手动计算边距,因为其他DOM元素可能会占用一些空间。

希望这会有所帮助: 20%是因为你的div高度,它是从屋顶直到元素头部的空间。

我使用auto让浏览器根据总可用空间自行决定width(左右空格)。

我没有使用auto作为高度,因为它不起作用,如果文档的长度增加,你不希望文章div在那里遥不可及。