学校のプロジェクトの一環としてレスポンシブ Web サイトを作成しています。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;
}