html - 将<img>放在<div>中

如何在包含<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;
}

最佳答案

您可以这样写：

的CSS

div{
    width:200px;
    height:200px;
    border:1px solid red;
    text-align:center;
    line-height:200px;
}

img{
    vertical-align:middle;
}

的HTML

<div>
    <img src="http://dummyimage.com/150x150/000/fff&text=dummy" >
</div>

选中此http://jsfiddle.net/dP89y/