3

我有一个这样的div：

<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>

我希望它垂直居中并调整大小，所以我使用标准 JQuery 代码：

$(window).resize(function(){

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

$(window).resize();

div 的 css 是这样的：

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

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

大家能帮我弄清楚吗？谢谢！！

4

2 回答 2

2

你在.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()

由于某些浏览器在调整大小期间经常触发（有些只在调整大小结束时触发），因此缓存 jQuery对象resize可能“更好” ：window

$(document).ready(function () {
    var $window = $(window);
    $window.resize(function(){
        $('.first').css({
            position:'absolute',
            top: function () {
                return ($window.height() - $(this).outerHeight())/2;
            }
        });
    });
    $window.resize();
});
于 2013-04-04T03:32:56.277 回答
0

看来你想将你的'.first' div 放在窗口的中心。如果就是这样，您实际上不需要调整大小事件。这将起作用

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

如果你想要它在窗口的中心。使用 CSS

。第一的 {

position: fixed,
top: 50 %

}

如果您希望它位于文档中心或其他偏移父级，请给出position:absolute. 如果你愿意，你也可以为左做同样的事情。

即使您知道 '.first' div 的大小，您也可以直接在 css 上赋予 margin-top (=-height/2) 属性。比你不需要javascript代码。

如果您想使用顶部位置而不是将调整大小处理程序保留在 document.ready 处理程序中

$(function(){   
    var first = $('.first');
    $(window).resize(function(){ 
       first.css({
          top: ($(window).height() - first.outerHeight(true)) / 2
       });
    }).resize();  
})
于 2013-04-04T04:01:17.677 回答