Question

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

在页面的一部分上，我有一系列图像。最初，每个图像都是隐藏的（参见下面的CSS）。我做得很好。页面加载时，第一个图像通过jquery淡入。设置了一个计时器，在X秒后，当前图像淡出，下一个淡入。

每张图片都包含在较大的DIV中。图像应该恰好位于div的中间（垂直和水平）。由于每个图像可能是不同的大小，我必须写一些逻辑来检查图像的高度并动态调整其边距（再次，请参阅下面的代码）。除了第一张图片外，这种方法很好。第一个图像的计算高度始终为0 ...这使得它看起来低于div的中间。

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

非常感谢任何帮助。

感谢

CODE

标记

    <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来仅等待包装内的图片加载，但我从未这样做过。

Answer 2

我认为vertical-align仅适用于内联元素。例如，请参阅this article。尝试将display: block;更改为display: inline;

修改：或者，如果不起作用，请直接在图片代码上设置vertical-align

Answer 3

显示项目，检查其高度并再次隐藏。 jQuery没有很好地测量隐藏元素。它将很快发生，用户将无法看到它。

Answer 4

这是基于网络工具箱的浏览器（chrome，safari）发生的吗？

如果是，您可以使用$(window).load(function()代替$(document).ready(function()，因为问题可能是由于图片尚未加载而未知高度。

Answer 5

div中的垂直线图像正在处理chrome和safari。

属性是：

<div class="image-wrap">
<img src="xyz.png"/>
</div>


.image-wrap {
display:table-cell;
width:400px;
vertical-align:middle;
}

DIV中的垂直对齐图像

感谢

5 个答案: