1

我在水平居中幻灯片图像时遇到问题，以便它们在所有屏幕尺寸/分辨率上居中。

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;
}

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

任何答复都非常感谢。

4

3 回答 3

0

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

于 2012-05-08T17:48:11.920 回答
0

添加.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; }
于 2012-05-08T17:55:56.160 回答
0

您应该确保.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容器设置为3800px宽，而里面的div没有设置宽度。如果将幻灯片容器内的 div 设置为 100% 宽度，它将导致它变为 3800px 宽，这样就不起作用了。

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

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

.slides_control div {
    width: 1280px;
    text-align: center;
}
于 2012-05-08T21:20:34.700 回答