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来等待包装器中的图像加载，但我从来没有这样做过。

Answer 2

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

属性是：

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


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

Answer 3

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

编辑：或者，如果不起作用，请直接在图像标记上设置vertical-align

Answer 4

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

Answer 5

这是否是基于网络工具箱的浏览器（chrome，safari）发生的任何机会？

如果是，你可以使用$(window).load(function()而不是$(document).ready(function()因为问题可能是因为图像尚未加载而未知高度。