CSS居中幻灯片图像

Question

我在将幻灯片图像水平居中时遇到问题，因此它们在所有屏幕尺寸/分辨率上都处于中心位置。

HTML 看起来是这样的

<div id='banner'>
    <div class='slides_container'>
        <div>
            <a href='#'><img src='images/banner.png'></a>
        </div>
        <div>
            <a href='#'><img src='images/banner2.png'></a>
        </div>
    </div>
</div>

与此匹配的 CSS 是：

#banner {
    width:100%;
    margin-bottom:50px;
}

.slides_container {
    width:100%;
    height:500px;
}

.slides_container div {
    width:1100px;
    height:500px;
    text-align:center;
}

我真的很难让图像在所有屏幕尺寸上居中，因为填充和边距不起作用我需要一种不同的方法！

非常感谢任何回复。

Answer 1

您应该确保.slides_container div 在其父级中居中，即

.slides_container div { 
  margin: 0px auto; // center
  width:1100px; 
  height:500px; 
  text-align:center; 
} 

如果这不起作用，您需要确保父容器的宽度为页面的 100%。

如果父级不是页面的 100% 宽度，则父级也需要具有此属性：

.slides_container {
    margin: 0px auto;
}

如果这不起作用，那么您需要确保其父级是页面的 100% 宽度。

希望这会有所帮助。

编辑

我在FireBug中看了一眼，马上就看出slide container设置为3800px宽，而里面的div没有设置宽度。如果将幻灯片容器内的 div 设置为 100% 宽度，它会导致它变成 3800px 宽，这样就不起作用了。

根据您使用的脚本的性质，它使用绝对定位的 div 来工作。所以margin: 0px auto 在这里不起作用。

解决方案是在 onload 和窗口调整大小时运行一些 javascript，以将保存图像的 div 设置为浏览器窗口的宽度，以及 text-align: center。例如，因为我有 1280px 宽的显示器，所以这对我来说是图像的中心：

.slides_control div {
    width: 1280px;
    text-align: center;
}

Answer 2

添加.slides_container img 和margin:0 auto

#banner { width:100%; margin-bottom:50px; }

.slides_container {
    width:100%;
    height:500px;
}

.slides_container div, .slides_container img {
    width:1100px;
    height:500px;
    text-align:center;
    margin:0 auto; }

Answer 3

通常他们使用margin:0 auto; 来处理这个问题。 text-align 对 div 没有好处。