gpt4 book ai didi

javascript - 如何在网页上居中显示幻灯片 (responsiveslides.js)?

转载 作者:行者123 更新时间:2023-11-28 05:15:10 24 4
gpt4 key购买 nike

我使用 responsiveslides.js ( http://responsiveslides.com/ ) 构建了一个幻灯片。幻灯片现在正在播放我的整个网页。我目前正在尝试将此幻灯片放映居中。

我试图用 this question 解决这个问题, 但我只得到了 Kay 提供的答案的一半结果...(内容水平居中,而不是垂直居中 + 下一个/上一个按钮不再在我的内容上..

谁有一些技巧可以帮助我?如果需要,我可以发布我的代码。

最佳答案

flex 盒!!

我对您的 slider 一无所知,但这会将单个目标 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;
}

然后你可以调整宽度,直到它表现得很好。

关于javascript - 如何在网页上居中显示幻灯片 (responsiveslides.js)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39351431/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com