以响应式幻灯片为中心

时间:2012-09-27 23:09:22

标签: css slideshow responsive-design centering

我正在使用RefineSlide自适应幻灯片,我无法居中,它始终贴在我页面的左侧。

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

我已经尝试将上述内容添加到我的CSS中,虽然这成功地将其中心化,但遗憾的是它不再响应,因为当我在iPhone上测试幻灯片显示不适合屏幕时。

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

当我像这样设计它时,它是响应......但是向左侧伸出。我需要用这个CSS来改变它以使其居中并保持响应?

1 个答案:

答案 0 :(得分:0)

这在某种程度上取决于你的其他标记,但总的来说这已经足够了:

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

Sample