Question

我正在建立一个响应式网站，作为学校项目的一部分。我正在尝试使用CSS3动画将艺术画廊从一幅画转换到另一幅画。过渡是有效的，但对于我的生活，我无法将图像放在幻灯片框架的中心。

我试图在这里查看是否有解决方案，但找不到我可以开始工作的解决方案。

感谢您的帮助。

HTML

<div id="image-slider">
        <div id="navigation">
            <a href="#slide1">1</a>
            <a href="#slide2">2</a>
            <a href="#slide3">3</a>
            <a href="#slide4">4</a>
            <a href="#slide5">5</a>
            <a href="#slide6">6</a>
            <a href="#slide7">7</a>
        </div>
        <div id="slide-frame">
            <img class="center" src="images/explorations/Bound.jpg" alt="" />
            <div id="slides">
                <img id="slide1" class="center" src="images/explorations/Bound.jpg" alt="" />
                <img id="slide2" class="center" src="images/explorations/Cleave.jpg" alt="" />
                <img id="slide3" class="center" src="images/explorations/forLoveofGodandCountry.jpg" alt="" />
                <img id="slide4" class="center" src="images/explorations/unknownCorrosive.jpg" alt="" />
                <img id="slide5" class="center" src="images/explorations/Untitled1.jpg" alt="" />
                <img id="slide6" class="center" src="images/explorations/Untitled3.jpg" alt="" />
                <img id="slide7" class="center" src="images/explorations/Untitled4.jpg" alt="" />
            </div>
        </div>
    </div>

CSS

#image-slider {
margin: 10px auto;
width: 100%;
}

#slide-frame {
height: 600px;
overflow: hidden;
margin: auto;
}

#slides {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
text-align: center;
}

.center{
margin: 0px auto;
display: block;
}

#slides img {
position: absolute;
top: 0;
margin: auto;
}

#navigation {
margin: 5px 0 0 0;
text-align: center;
z-index: 10px;
font-size: 2rem;
}

#navigation a {
text-decoration: none;
color: #373737;
display: inline-block;
}

#navigation a:hover {
color: #B6A084;
}

#slides img {
z-index: 1;
opacity: 0;

/* animation */
transition: all linear 400ms;
-o-transition: all linear 400ms;
-moz-transition: all linear 400ms;
-webkit-transition: all linear 400ms;
}

#slides img:target {
left: 0;
z-index: 5;
opacity: 1;
}

Answer 1

http://codepen.io/maxwbailey/pen/loezq

问题在于您在图片上的position:absolute，只需将其关闭并添加display:block; margin:auto;，您就可以了！ Here's a demo

我正在制作一个响应式网站，需要将图像置于使用css3动画的div中

1 个答案: