jquery - DIV 中的垂直对齐图像

Question

我有一个非常小的问题，我认为可以通过重新考虑我的 CSS 来解决。

在页面的一部分上，我有一系列图像。最初，每个图像都是隐藏的(参见下面的 CSS)。我让它工作正常。当页面加载时，第一张图片通过 jquery 淡入。设置了一个计时器，在 X 秒后，当前图像淡出，下一张淡入。

每个图像都包含在一个更大的 DIV 中。该图像应该正好位于 div 的中间(垂直和水平)。由于每个图像的大小可能不同，我不得不编写一些逻辑来检查图像的高度并即时调整其边距(同样，请参见下面的代码)。这工作正常，除了第一张图片。第一张图片的计算高度始终为 0... 这使得它看起来低于 div 的中间。

使用垂直对齐可以达到同样的效果吗？到目前为止，我一直没有成功。

非常感谢任何帮助。

谢谢

代码

标记

    <div id="logowrapper">
        <div class="logo">
            <img src="" />
        </div>
        <div class="logo">
            <img src="" />
        </div>
        <div class="logo">
            <img src="" />
        </div>
    </div>

CSS

#logowrapper
{
    border-right: 2px solid #DDD;
    display: block;
    position: absolute;
    top: 12px;
    left: 10px;
    text-align: center;
    width: 370px;
    height: 208px;
    background-color: #FFF;
}
.logo
{
    display: none;
}

JS

$(document).ready(function() {
    var currentLogo = 0;
    var numLogos = $(".logo").size();
    var interval = 3000; 
    var boxHeight = $("#logowrapper").height();
    function updateLogo() {
        if (currentLogo >= numLogos) {
            currentLogo = 0;
        }


        $(".logo").hide();  
        var thisLogo = $(".logo:eq(" + currentLogo + ")");
        thisLogo.fadeIn();
        var logoHeight = thisLogo.height();

        var newMargin = parseInt((boxHeight / 2), 10) - parseInt((logoHeight / 2), 10);

        thisLogo.css({ marginTop: newMargin });

        currentLogo++;

    }
    setInterval(updateLogo, interval);
    updateLogo();


});

Answer 1

当您尝试获取其高度时，第一张图片可能尚未完成加载。其他人工作是因为当你到达那些人时，他们已经完全加载了。

您可以使用load 事件而不是ready 来等待图像加载。使用 jQuery:

$(window).load(function() {
    ...
});

我认为您可以使用 "#logowrapper" 而不是 window 来仅等待包装器内的图像加载，但我从未这样做过。