如何将 <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>
关于html - 将 `<img>` 置于 `<div>` 的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13757783/