jquery实现元素自适应水平垂直居中
浏览数：26 /
时间：2015年06月09日
(function($){
$.fn.vhAlign = function(){
return this.each(function(i){
//获取元素的内容高度
var h = Math.ceil($(this).height());
//outerHeight=padding+border+height
var oh = Math.ceil($(this).outerHeight());
//取得margin-top值
var mt = Math.ceil(oh / 2);
//取得元素宽度
var w = Math.ceil($(this).width());
//outerWidth=padding+border+width
var ow = Math.ceil($(this).outerWidth());
//取得margin-left
var ml = Math.ceil(ow / 2);
//实现元素居中效果
$(this).css({
"margin-top": "-" + mt + "px",
"top": "50%",
"margin-left": "-" + ml + "px",
"left": "50%",
"width":w,
"height":h,
"position": "absolute"
});
});
};
})(jQuery);
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
