html - 我如何水平居中我的 css 幻灯片

Question

我已将 jsfiddle 用于该文件。幻灯片在底部。我试图让它居中，但到目前为止它停留在左边距。 最终结果在这里:https://jsfiddle.net/n6kae2rn/ https://jsfiddle.net/n6kae2rn/embedded/result/

.css-slideshow {
    text-align:center;
    position: relative;
    max-width: 410px;
    height: 730px;
}
.css-slideshow figure {
    margin: 0;
    position: absolute;
}
.css-slideshow figcaption {
    position: absolute;
    top: 0;
    color: #fff;
    background: rgba(0, 0, 0, .3);
    font-size: .8em;
    padding: 8px 12px;
    opacity: 0;
    transition: opacity .5s;
}
.css-slideshow:hover figure figcaption {
    transition: opacity .5s;
    opacity: 1;
}
.css-slideshow figure {
    opacity:0;
}
figure:nth-child(1) {
    animation: xfade 42s 32s infinite;
}
figure:nth-child(2) {
    animation: xfade 48s 24s infinite;
}
figure:nth-child(3) {
    animation: xfade 48s 16s infinite;
}
figure:nth-child(4) {
    animation: xfade 48s 8s infinite;
}
figure:nth-child(5) {
    animation: xfade 48s 0s infinite;
}
@keyframes xfade {
    0% {
        opacity: 1;
    }
    10.5% {
        opacity:1;
    }
    20% {
        opacity: 0;
    }
    98% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
div.poster {
    background: url(http://jillun.com/dp-intsmall.jpg) repeat;
    padding: 25px;
}

Answer 1

添加<div class="css-container">在你的 <div class="css-slideshow"> 之上.不要忘记添加另一个 </div>在你的 css 幻灯片之后。

然后更改您的 css 以反射(reflect)这一点:

.css-slideshow {
text-align:center;
position: relative;
max-width: 410px;
height: 730px;
margin: auto;
}
.css-container {
width: 100%;
}

这会在您的页面上创建一个全宽容器元素。然后你的幻灯片 CSS 理解文本对齐元素居中，最后自动填充边距。

希望对您有所帮助。

JSfiddle