Html CSS 居中幻灯片图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10503600/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Centering Slideshow Images
提问by James Parker
I am having issues horizontally centering my slideshow images so that they are central on all screen sizes / resolutions.
我在水平居中我的幻灯片图像时遇到问题，以便它们在所有屏幕尺寸/分辨率上都处于中心位置。
The HTML looks as such
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>
And the CSS to match this is:
与此匹配的 CSS 是：
#banner {
width:100%;
margin-bottom:50px;
}
.slides_container {
width:100%;
height:500px;
}
.slides_container div {
width:1100px;
height:500px;
text-align:center;
}
I am really struggling here to get the image to center on all screen sizes since padding and margins don't work I am in need of a different method!
由于填充和边距不起作用，我真的很努力让图像在所有屏幕尺寸上居中，我需要不同的方法！
Any replies are extremely appreciated.
任何答复都非常感谢。
采纳答案by Ozzy
You should make sure the .slides_container divis centered within its parent, i.e.
您应该确保.slides_container div在其父级内居中，即
.slides_container div {
margin: 0px auto; // center
width:1100px;
height:500px;
text-align:center;
}
If that doesn't work, you need to make sure the parent container is width 100% of the page.
如果这不起作用，您需要确保父容器的宽度为页面的 100%。
If the parent is not width 100% of the page, the parent needs to have this property also:
如果父级不是页面的 100% 宽度，则父级也需要具有此属性：
.slides_container {
margin: 0px auto;
}
If that doesn't work, then you need to make sure its parent is 100% width of the page.
如果这不起作用，那么您需要确保其父页面的宽度为 100%。
Hope this helps.
希望这可以帮助。
Edit
编辑
I took a look at it in FireBug, and it was immediately apparent that the slide container is set to 3800px wide, and the div inside doesn't have a width set. If you set the div inside the slide container to 100% width, it will cause it to become 3800px wide, so that won't work.
我在FireBug中查看了一下，很明显幻灯片容器设置为3800px宽，而里面的div没有设置宽度。如果将幻灯片容器内的 div 设置为 100% 宽度，则会导致其宽度变为 3800 像素，因此将不起作用。
By the nature of the script you are using, it is using an abolute-positioned div to work. So margin: 0px autowon't work here.
根据您使用的脚本的性质，它使用绝对定位的 div 来工作。所以margin: 0px auto不会在这里工作。
The solution is a bit of javascript to run onload, and on window resize, to set that div which holds the image to the width of your browser window, and text-align: center. So for example, since I have 1280px wide monitor, this centers the image for me:
解决方案是在加载时运行一些 javascript，并在调整窗口大小时，将保存图像的 div 设置为浏览器窗口的宽度，以及 text-align: center。例如，因为我有 1280 像素宽的显示器，这对我来说是图像的中心：
.slides_control div {
width: 1280px;
text-align: center;
}
回答by 5566
Normally they use margin:0 auto;to handle this. text-alignwon't do you good for div.
通常他们margin:0 auto;用来处理这个。text-align对你没有好处div。
回答by breezy
Add .slides_container imgand margin:0 auto
添加.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; }
