我的页面有一个图像空间,可以说是最大100×100图像.用户可以上传任何图像维度,并且Web应用程序会将其大小调整为100×100.因此,可以将图像的大小调整为75×100或100×75等.
无论调整大小的图像的尺寸如何,我希望它在网页的分配空间中垂直和水平居中显示.我如何在CSS中执行此操作？我需要一个包含div,如下所示：
<div class="image_container">
<image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>
无论如何,样本CSS会有所帮助.谢谢！
解决方法
试试这个 –
http://jsfiddle.net/zYx4g/
这适用于任何大小和所有浏览器的图像.
这适用于任何大小和所有浏览器的图像.
.image_container {
width: 300px;
height: 300px;
background: #eee;
text-align: center;
line-height: 300px;
}
.image_container img {
vertical-align: middle;
}
