如何<img>
在包含中居中<div>
?
平时margin-left: auto; margin-right: auto;
不行。
图像可以比容器大,并由max-width
和水平或垂直缩放max-height
。
带有以下代码的 jsfiddle:http: //jsfiddle.net/9ShGj/1/
HTML:
<div class="container">
<img src="http://www.yensa.com/fat/fat-dude10.jpg" />
</div>
<div class="container">
<img src="http://oi43.tinypic.com/bje2wn.jpg" />
</div>
CSS:
.container {
width: 200px;
height: 200px;
background: rgb(120, 120, 120);
border: 1px solid red;
margin: 5px;
}
.container img {
max-width: 200px;
max-height: 200px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}