Question

我想将Obj“包装器”置于页面中心（垂直方向） jQuery：

$(document).ready(function(){
win_height = $(window).height();
doc_height = $('#wrapper').height();
$('#wrapper').css({'margin-top':(win_height/2)-(doc_height/2)});
});

HTML：

<div id="wrapper" style="width:100px;height:400px;margin: 0 auto;">

</div>

它不工作，怎么了？谢谢！

Answer 1

在css中它会像

#wrapper{
   top: 50%;
   margin-top: -200px; //half of height
   height: 400px;
}

在jq中它可以用于:(可能是一些小的逻辑错误，因为有点累）

var objHeight = $("#wrapper").height() /2;
var winHeight = $(window).height() /2;
$('#wrapper').css("top", (winHeight - objHeight) + 'px');

Answer 2

你可以使用Javascript像这样： -

$(document).ready(function(){
    center_y = (jQuery(window).height() - $('#wrapper').height() ) / 2;
    center_x = (jQuery(window).width() - $('#wrapper').width() ) / 2;
    $('#wrapper').css({'margin-top':center_y ,'margin-left':center_x  });
});

或者您可以使用CSS： -

#wrapper{margin: 0 auto;}

这会使它以X Line为中心

谢谢，

jQuery：将对象放在页面中心

2 个答案: