Я делаю отзывчивый веб-сайт и нуждаюсь в центре изображения внутри div, который использует анимацию css3.

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; и you'r хорошо идти! Here's a demo.