Question

我正在使用jQuery动画淡化到图像，为此工作，这两个图像位于DIV内部的DIV中，使其看起来像一个正在淡入另一个，一个位于另一个之上。它的工作原理，我想做的就是将它移到我的页面中心，似乎无法使它工作。这是HTML和CSS。我尝试修改边距，顶部和左边定位等，但没有任何成功。感谢您的任何反馈。

编辑：我想要的是一个DIV直接在另一个之上。它们都填充了相同的图像，除了我在编辑软件中创建的周围有一个发光。当页面加载时，jQuery触发第一个div，.fade，淡出，并允许其他div，.inside，淡入，创建一个动画，使其看起来好像一个图像正在慢慢变为另一个。这已经自动发生并完美运行。我只是希望图像直接在浏览器窗口的中间居中，而不是在左侧自动放置。

CSS

    .container
    {
        position:relative;
    }
    .fade
    {
        position: absolute;
        z-index:1;
        top:0;
        left:0;
    }
    .inside
    {
        position: absolute;
        display: none;
        z-index:2;
        top:0;
        left:0;
    }

HTML

    <div class="container">
            <div class="fade">
                <img src="namelarge.png" />
                    <div class="inside">
                        <img src="nameglow.png" />
                    </div>
            </div>
        </div>

编辑：这是我的jQuery

$(window).load(function () {
setTimeout(function () {
    $('div.fade > div') . fadeIn(3000) // 3 second fade in
}, 2000) // after 2 seconds. })

Answer 1

我假设你试图将.fade div放在.container div中。

从.fade css中取出顶部和左侧属性，定义width属性，然后添加：

margin: 0 auto;

这应该水平居中。

Answer 2

如果你想以.fade div为中心，请尝试：

.fade {
position:relative;
width:50px;
z-index:1;
margin:auto;
}
.inside {
position: absolute;
display: none;
z-index:2;
top:0;
left:0;
}

点击此处：jsfiddle.net/TcfBH/（v2）

在浏览器窗口的中心叠加DIV

2 个答案: