这种用法很常见,特记录一下。我用了两个不同大小的图片,存放图片的div都是等宽等高的。
HTML如下:
<div class="pic"><img src="index.jpg" /></div>
<div class="pic"><img src="one_03.png" /></div>
CSS如下:
.pic {
width: 120px;
height: 120px;
margin: 40px auto;
border: 1px solid #ccc;
text-align: center;
padding: 5px;
}
.pic:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}
.pic img {
max-width: 120px;
max-height: 120px;
vertical-align: middle;
}
运行效果如下: