在图片缩略图列表当中,往往会遇到宽度、高度不同的图片,在等比例缩放的情况下,如何能够让图片在DIV中垂直或者水平居中呢?下面就介绍css的方法。
如图:
这里,我们不考虑IE低版本的浏览器。主要针对于Chrome、Safari和高版本的IE内核浏览器。
代码如下:
.thumb{ width:120px; height:120px; border:1px solid #ccc; display:table-cell;/*最重要*/ vertical-align:middle;/*设置水平居中*/ }
.thumb img{ border:none; max-width:100%; max-height:100%; display:block; margin:auto;/*设置垂直居中*/ }
.thumb img{ border:none; max-width:100%; max-height:100%; display:block; margin:auto;/*设置垂直居中*/ }