Question

我使用responsiveslides.js（http://responsiveslides.com/）制作了幻灯片。幻灯片现在正在我的整个网页上。我目前正试图以幻灯片为中心。

我尝试使用this question来解决问题，但我只得到了一些半结果，并且凯提供了答案...（内容以水平为中心，而不是垂直+下一个/上一个按钮不在我的内容了..

任何人都有一些技巧可以帮助我吗？如果需要，我可以发布我的代码。

Answer 1

Flexbox的!!

我对你的滑块一无所知，但这会将一个目标div放到页面的中间 - 差不多。它水平居中，但目标div的顶部垂直放置在中间。要解决这个问题，请将高度从100vh调整到更小的值（即减去目标div大小的一半）。

    body {
        height:100vh;
        display:-webkit-flex;
        display:flex;
        -webkit-justify-content:center;
        justify-content:center;
        -webkit-align-items:center;
        align-items:center;
        flex-direction:row;
        -webkit-flex-direction: row;
        }

更新：

您可以添加容器div。例如，

<body><div class='container'>your slideshow</div></body>

然后使用：

.container { height:100vh; width:100vw; display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; flex-direction:row; -webkit-flex-direction: row; }

然后你可以调低宽度直到它的效果很好。

如何在网页上居中放置幻灯片（responsiveslides.js）？

1 个答案: