3

这是小提琴。

HTML：

<div id="greeter" class="welcomer">
    <h1>This should be centered</h1>
</div>

jQuery：

$(document).ready(function(){

$(window).resize(function(){

    $('.welcomer').css({
        position:'absolute',
        left: ($(window).width() - $('.welcomer').outerWidth())/2,
        top: ($(window).height() - $('.welcomer').outerHeight())/2
    });

});

// To initially run the function:
$(window).resize();

});​

​</p>

它的工作方式似乎存在错误。有时它会居中，有时它只会垂直或水平居中。我是 javascript 和 jquery 的新手，我做错了什么吗？

4

3 回答 3

1

好的，看这里：http: //jsfiddle.net/zQ97A/13/

基本上你需要在你的容器上有宽度，你还需要以下代码：

"top": ((($(window).height() - $('.welcomer').outerHeight()) / 2) + $(window).scrollTop() + "px"),
"left": ((($(window).width() - $('.welcomer').outerWidth()) / 2) + $(window).scrollLeft() + "px")
于 2012-12-11T14:02:11.017 回答
0

根据我的口味，最好在 css 中定义一个类，然后使用 jquery 将该类设置为 div 到您的 dom 中。

#custom.css
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -(your_div_height/2)px;
  margin-left: -(your_div_weight/2)px;
}

#custom.js
$(#greeter).addClass("center")

我觉得这更快，因为css文件在js文件之前加载

于 2012-12-11T14:28:36.747 回答
0

如果您为.welcomer DIV 定义宽度，您的代码将完美运行！

于 2012-12-11T14:38:29.967 回答