Html 无论浏览器大小如何，始终保持图像居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12396794/
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
Keep an Image Always Centered Regardless of Browser Size
提问by Jon
I am wondering if it is possible to keep an imginside a divalways centered regardless of the browser size? By being centered I mean that the left/right sides of the image gets cropped to ensure the image stays centered without modifying the height. Also, is it possible to prevent the horizontal scroll bar from appearing when the browser width is less then the image width?
我想知道是否有可能无论浏览器大小如何都保持img内部div始终居中？居中是指图像的左侧/右侧被裁剪以确保图像保持居中而不修改高度。另外，当浏览器宽度小于图像宽度时，是否可以防止出现水平滚动条？
I'm sure this is really easy to do if my image is located in a background-urltag in CSS, but because this image is being housed inside the SlidesJS carousel the image has to be from an imgtag.
我敢肯定，如果我的图像位于background-urlCSS中的标签中，这真的很容易做到，但是由于该图像位于 SlidesJS 轮播中，因此图像必须来自img标签。
At the moment, I have used margin:0 auto;to keep the image centered as long as the browser width is larger then the image. Once the browser width shrinks, the image does not resize with the shrinking browser size. I also have yet to figure out how to remove the horizontal scroll bar when the browser width is too small.
目前，margin:0 auto;只要浏览器宽度大于图像，我就习惯将图像居中。一旦浏览器宽度缩小，图像不会随着浏览器尺寸的缩小而调整大小。我还没有弄清楚当浏览器宽度太小时如何删除水平滚动条。
This is what I'm trying to achieve: http://imgur.com/Nxh5n
这就是我想要实现的目标：http: //imgur.com/Nxh5n
This is an example of what the page layout is suppose to look like: http://imgur.com/r9tYx
这是页面布局的示例：http: //imgur.com/r9tYx
Example of my code: http://jsfiddle.net/9tRZG/
我的代码示例：http: //jsfiddle.net/9tRZG/
HTML:
HTML：
<div id="wrapper">
<div id="slides">
<div class="slides_container">
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
<div class="slide"> <!-- Carousel slide #1 -->
<img src="http://www.placehold.it/200x50/">
</div>
</div>
</div>
</div>?
CSS:
CSS：
#wrapper {
width: 200px;
margin: 0 auto;
}?
回答by Shmiddty
Try this: http://jsfiddle.net/9tRZG/1/
试试这个：http: //jsfiddle.net/9tRZG/1/
#wrapper {
max-width: 200px; /* max-width doesn't behave correctly in legacy IE */
margin: 0 auto;
}
#wrapper img{
width:100%; /* the image will now scale down as its parent gets smaller */
}
?
To have the edges cropped, you can do this: http://jsfiddle.net/9tRZG/2/
要裁剪边缘，您可以这样做：http: //jsfiddle.net/9tRZG/2/
#wrapper {
max-width: 600px; /* so this will scale down when the screen resizes */
margin: 0 auto;
overflow:hidden; /* so that the children are cropped */
border:solid 1px #000; /* you can remove this, I'm only using it to demonstrate the bounding box */
}
#wrapper .slides_container{
width:600px; /* static width here */
position:relative; /* so we can position it relative to its parent */
left:50%; /* centering the box */
margin-left:-300px; /* centering the box */
}
#wrapper img{
display:block; /* this allows us to use the centering margin trick */
margin: 2px auto; /* the top/bottom margin isn't necessary here, but the left/right is */
}
回答by Jon
Jeff Hines linked putting image always in center pagewhere ShankarSangoli explained how to achieve this.
杰夫·海因斯 (Jeff Hines)将图像始终放在中心页面链接，其中 ShankarSangoli 解释了如何实现这一点。
img.centered {
position:fixed;
left: 50%;
top: 50%;
/*
if, for instance, the image is 64x64 pixels,
then "move" it half its width/height to the
top/left by using negative margins
*/
margin-left: -32px;
margin-top: -32px;
}
回答by James
I am not sure about the align center looks proper to me as for the scroll bar. You can use the following:
对于滚动条，我不确定对齐中心是否适合我。您可以使用以下内容：
overflow-x: hidden;
