0

I have read so many questions and answers on this but none of them seem to fix my problem. Basically I have an HTML and CSS slideshow and I am trying to center this slideshow. I have position: absolute in the code, however when I try to remove that, the images are no longer in a slideshow and are just all down the page.

Here is my code:

<body>
<div class="container">
    <img src=>
    <img src=>
    <img src=>
    <img src=>
    <img src=>
    <img src=>
    <img src=>
    <img src=>
</div>

<style>

.container {
    position:relative;
}
.container img {
    position:absolute;
    width:900px;
    height:500px
}
@-webkit-keyframes xfade {
    0% {
        opacity: 1;
    }
    12.5% {
        opacity:1;
    }
    16.5% {
        opacity:0;
    }
    96% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes xfade {
    0% {
        opacity: 1;
    }
    12.5% {
        opacity:1;
    }
    16.5% {
        opacity:0;
    }
    96% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
.container img:nth-child(8) {
    -webkit-animation: xfade 120s 0s infinite;
    animation: xfade 120s 0s infinite;
}
.container img:nth-child(7) {
    -webkit-animation: xfade 120s 15s infinite;
    animation: xfade 120s 15s infinite;
}
.container img:nth-child(6) {
    -webkit-animation: xfade 120s 30s infinite;
    animation: xfade 120s 30s infinite;
}
.container img:nth-child(5) {
    -webkit-animation: xfade 120s 45s infinite;
    animation: xfade 120s 45s infinite;
}
.container img:nth-child(4) {
    -webkit-animation: xfade 120s 60s infinite;
    animation: xfade 120s 60s infinite;
}
.container img:nth-child(3) {
    -webkit-animation: xfade 120s 75s infinite;
    animation: xfade 120s 75s infinite;
}
.container img:nth-child(2) {
    -webkit-animation: xfade 120s 90s infinite;
    animation: xfade 120s 90s infinite;
}
.container img:nth-child(1) {
    -webkit-animation: xfade 120s 105s infinite;
    animation: xfade 120s 105s infinite;
}

.container {
    margin: 0 auto;
}

</style>
Mykola
  • 3,343
  • 6
  • 23
  • 39
Abbie
  • 17
  • 1
  • This is what you want to center a div into an other div. http://stackoverflow.com/a/34741672/2412797 . When you have a list of images, the easiest way is to set image with higher height to relative and set others to absolute. If you remove the relative image, think to set an other image to relative. You could also set the height on your container to center all images into. – Bruno J. S. Lesieur Jan 17 '16 at 11:51
  • Duplicate.. and also PLEASE add a replica of your problem, with VALID html... – fnune Jan 17 '16 at 11:55

0 Answers0