修改

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

通常他们使用margin:0 auto;来处理这个问题。 text-align div对你不利。{/ 1}。

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

您应该确保.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中看了一下，很明显幻灯片容器的宽度设置为3800px，内部的div没有设置宽度。如果将幻灯片容器中的div设置为100％宽度，则会使其变为3800px宽，因此无效。

根据您使用的脚本的性质，它使用一个绝对定位的div来工作。因此margin: 0px auto无效。

解决方案是运行onload的一些javascript，并且在窗口调整大小时，设置将图像保持为浏览器窗口宽度的div，以及text-align：center。因此，例如，由于我有1280像素宽的显示器，因此我将图像置于中心位置：

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

CSS居中幻灯片图像

3 个答案:

修改