加载时JQuery Resize不工作

我有一个这样的部门：

<div class="first">
<img src="image/image1.gif" style="width:30%;display:inline-block"/> 
<img src="image/image2.gif" style="width:30%;display:inline-block"/> 
<img src="image/image3.gif" style="width:30%;display:inline-block"/>
<br />testing<br /><br />がらんどう
</div>

.first
{
position:absolute;
top:50%;
}

div的css如下所示：

<div class="first">
<img src="image/image1.gif" style="width:30%;display:inline-block"/> 
<img src="image/image2.gif" style="width:30%;display:inline-block"/> 
<img src="image/image3.gif" style="width:30%;display:inline-block"/>
<br />testing<br /><br />がらんどう
</div>

.first
{
position:absolute;
top:50%;
}

问题是： 加载时，div不是垂直集中的，但当您调整窗口大小时，它将集中

---

你们能帮我弄清楚吗？谢谢

您的

.resize（）

调用在

$（document.ready（）

中，对吗？否则，没有或许多元素将不可用。您可能想要：

$(document).ready(function () {
    $(window).resize(function(){
        $(".first").css({
            position:'absolute',
            top: function () {
                return ($(window).height() - $(this).outerHeight())/2;
            }
        });
    });
    $(window).resize();
});

另外，您希望使用

$（this）.outerHeight（）

而不是

$（'.first'）.outerHeight（）

由于某些浏览器在调整大小时经常触发

resize

（有些浏览器仅在调整大小结束时触发），因此缓存jQuery

窗口

对象可能“更好”：

$(document).ready(function () {
    var $window = $(window);
    $window.resize(function(){
        $('.first').css({
            position:'absolute',
            top: function () {
                return ($window.height() - $(this).outerHeight())/2;
            }
        });
    });
    $window.resize();
});

---

似乎您想将“.first”div放置在窗口的中心。 如果是这样，您实际上不需要调整事件大小。这会奏效的

$(function () {
    var first = $('.first');
    first.css({
        'margin-top': -first.height();
    });
});

若你们想把它放在窗户的中央。使用CSS

.首先{

position: fixed,
top: 50 %

}

如果您希望它位于文档中心或其他偏移父对象，请给出

位置：绝对值
。
如果你想的话，你也可以在左边做同样的事情

即使您知道“.first”div的大小，也可以直接在css上提供margin top（--height/2）属性。这样就不需要javascript代码了

如果您想使用top position执行此操作，请将调整大小处理程序放在document.ready处理程序中

$(function(){   
    var first = $('.first');
    $(window).resize(function(){ 
       first.css({
          top: ($(window).height() - first.outerHeight(true)) / 2
       });
    }).resize();  
})

您的代码是否在
$（document）.ready（）
处理程序中？@DipeshParmar是的，您的代码可以工作，因为您的小提琴设置为运行
onLoad
。就是这样。但真正的代码需要一个事件，而不是一把小提琴setup@Ian是的，这就是我想说的，OP.。但是没有添加文本，因为所有的答案都是针对我的……我认为我的命名有点混乱。我改变了。首先是这个，它会起作用。谢谢大家：）我的错误是我使用的是
$（文档）。调整大小（
而不是
$（窗口）。调整大小（
），但您的答案显示=P+1