可能重复:
垂直居中可变高度图像,同时保持最大宽度/高度
所以这里有一个问题,我有不固定大小的图像,我只知道高度或宽度必须是 200px。现在我想把这个图像放在固定大小为 200px x 200px 的 div 中,并垂直和水平居中。是否可以?
我搜索了很多问题,但没有一个回答我的问题,这对于解决所有问题应该是很困难的。
可能重复:
垂直居中可变高度图像,同时保持最大宽度/高度
所以这里有一个问题,我有不固定大小的图像,我只知道高度或宽度必须是 200px。现在我想把这个图像放在固定大小为 200px x 200px 的 div 中,并垂直和水平居中。是否可以?
我搜索了很多问题,但没有一个回答我的问题,这对于解决所有问题应该是很困难的。
取自这个答案的基本思想。不依赖display:table-cell;
IE7 不支持的内容。
<div class="image-wrapper"><img src="http://example.com/image.png"></div>
.image-wrapper {
position:relative;
width:200px;
height:200px;
}
.image-wrapper img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
您可以让它像表格单元格一样显示:
/* This is item wrapping each image */
.item {
height: 200px;
width: 200px;
display:table-cell;
vertical-align:middle;
text-align: center;
}