今天遇到的问题就是需要把图片上下左右居中,其中左右居中比较简单,可以使用text-align:center;就能达到效果,重点在于高度居中。 在不知道图片高度的情况下,原先想使用css使得其上下居中,需要用到的是:
display: table-cell;
display: table;
vertical-align: middle
但是由于IE低版本不支持display: table-cell;,所以最终还是使用js来进行图片定位:
/** * 图片居中并根据上下尺寸铺满 * */
$(function(){
function reset_img_box(e){
$(function(){
var childred=$(e);
var mainSize = [childred.width(),childred.height()];
var func = function(obj){
var h = obj.height(),w = obj.width();
if (h>0&&h<mainSize[1]){
var m = (mainSize[1]-h)/2;
obj.css({
margin:m+'px 0'
});
}
};
for (var i=0; i < childred.length; i++) {
var obj = $(childred[i]).find("img");
if (obj[0].complete){
func(obj);
}
obj.on('load',function(){
func(this);
});
}
})
}
reset_img_box("#focus_map_small .ul-list li");
})
在需要定位的图片加载完成之后,对图片进行遍历,获取图片的高度和所在容器的高度,将差值/2,再使用margin进行上下居中。