0

我正在制作一个响应式网站，作为学校项目的一部分。我正在尝试使用 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;
}
4

1 回答 1

0

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

问题是position:absolute您在图像上，只需将其取下并添加，您就可以display:block; margin:auto;开始了！这是一个演示。

于 2013-08-19T18:05:37.250 回答