css - 将响应式幻灯片居中

Question

我正在使用 RefineSlide 响应式幻灯片，但我无法将它居中，它总是停留在我页面的左侧。

#slideshow{
position: relative;
width: 960px;
height:auto;
left: 50%;
margin-left: -480px;
}

我已经尝试将上面的代码添加到我的 CSS 中，虽然这成功地将它居中，但不幸的是它不再响应，因为当我在 iPhone 上测试时幻灯片放映不适合屏幕。

#slideshow{
position: relative;
width: 100%;
height:auto;
}

当我这样设计它时，它是响应式的……但坚持在左边。我需要更改此 CSS 的哪些内容以使其居中并保持响应？

Answer 1

这在某种程度上取决于您的其他标记，但通常这就足够了:

#slideshow {
    margin: auto;
    width: Npx;
    /* also display: block if the element doesn't already have it */
}

Sample .