Question

我已经阅读了很多这方面的问题和答案，但似乎没有一个能解决我的问题。基本上我有一个HTML和CSS幻灯片，我试图以幻灯片为中心。我在代码中有position: absolute，但是当我尝试删除它时，图片不再是幻灯片显示，只是在页面下方。

这是我的代码：

<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>

如何居中div容器

0 个答案: