今天遇到的问题就是需要把图片上下左右居中,其中左右居中比较简单,可以使用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进行上下居中。