在一些情况下,我们需要对图片设置垂直水平居中的效果
html
<div class="img">
<img src="../../../static/images/renlainzhuapai.png" alt="">
</div>
css
.result-list li .img{
width: 210px;
height: 210px;
overflow: hidden;
text-align: center;
background: #455db8;
display: table-cell;
vertical-align: middle;
}
.result-list li .img img{
max-width:100%;
max-height: 100%;
}
效果是这样:
可以看到图片距离父元素底部有间隙;
如果解决这个问题呢?很简单,只要给父元素设置font-size:0就行了
.result-list li .img{
width: 210px;
height: 210px;
overflow: hidden;
text-align: center;
background: #455db8;
display: table-cell;
vertical-align: middle;
font-size:0
}