码迷,mamicode.com
首页 > Web开发 > 详细

jquery实现元素自适应水平垂直居中

时间:2015-04-12 19:00:15      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:

(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);

jquery实现元素自适应水平垂直居中

标签:

原文地址:http://www.cnblogs.com/gyx19930120/p/4419984.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!