调整浏览器大小后，将网站上的旋转木马保持在页面中心

Keeping carousel on a website centered in the page after browser resize?

本文关键字：旋转木马 浏览器 网站 调整      更新时间：2023-09-26

我正在一个网站上工作，主页是一个基于jquery-based的旋转木马，我从这里获取了它，并根据我查找网站所需的特定方式进行了大量修改。问题是，我不得不手动定义每个旋转木马项目的位置，以便在CSS中查看网站的每个屏幕分辨率时，将它们正确地集中在圆形背景周围，如下所示：

@media (device-width: 1680px) {
    .flipster-carousel .flip-past {
        -webkit-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
        -moz-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
        -o-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
        -ms-transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
        transform: translateX(-22%) translateY(-15%) translateZ(0) scale(0.30);
    }
}

我可以看出，这绝对不是最好的方法，而且这是一个非常棘手的方法。我发现这样做的最大问题是，如果计算机上的浏览器窗口不是全屏的，旋转木马元素将从网站的其他部分偏移并偏离中心。我绝对必须解决这个问题，这样当浏览器窗口调整大小时，转盘将与页面的其余部分保持居中，但我甚至不知道从哪里开始编码。有人能为我指明正确的方向吗？或者给我一些建议吗？我正在工作的网站就在这里。谢谢

margin-left/right:auto修复了它。

相关文章：