具有jquery返回边距的绝对中心 - 左0

时间:2015-04-07 10:08:48

标签: javascript jquery centering absolute

我为网站设计了一个JQuery插件,目的是使用像素而不是百分比帮助将元素置于绝对位置。 页面开始时,元素垂直居中但不是水平居中(margin-left = 0)。当我在控制台中使用相同的脚本时,我应用于一个元素并且它可以工作。

附加功能的代码:

$(document).ready(function() {
$(element).psfCenter();
});

功能:

(function ($){
    // center element
    $.fn.psfCenter=function(orientation){   
         return this.each(function() {
            var widthParent=$(this).parent().width()/2;
            var heightParent=$(this).parent().height()/2;
            var widthElement=$(this).width()/2;
            var heightElement=$(this).height()/2;
            var left=widthParent-widthElement;
            var top=heightParent-heightElement;
            console.log(orientation)
            switch(orientation){
                case"x":
                $(this).css({
                'position':'absolute',
                'margin-left':left,
                })
                break;

                case "y":
                $(this).css({
                'position':'absolute',
                'margin-top':top
                })
                break;

                default:
                $(this).css({
                'position':'absolute',
                'margin-left':left,
                'margin-top':top
                })
                break;
            }   
        });
    };
})(jQuery);

1 个答案:

答案 0 :(得分:2)

我会给元素留下50%而不是margin-left它的宽度的一半。 这是因为你可能想让它在更小的设备上工作(响应)。

像这样:http://jsfiddle.net/bsxqmL6f/



$.fn.psfCenter = function(orientation) {
    return this.each(function() {
        var self = $(this);
        var inner_width = self.width();
        var inner_height = self.height();
        var set_absolute = function() {
            self.css('position', 'absolute');
        }        
        var set_left = function() {
            self.css({
                'left': '50%',
                'margin-left': '-' + (inner_width * .5) + 'px'
            }); // faster than deviding by 2
        };
        var set_top = function() {
            self.css({
                'top': '50%',
                'margin-top': '-' + (inner_height * .5) + 'px'
            }); // faster than deviding by 2
        };
        
        set_absolute();
        switch(orientation) {
            case 'x':
                set_top();
                break;
            case 'y':
                set_left();
                break;
            default:
                set_left();
                set_top();
                break;
        }
    });
}

$('.center-me').psfCenter();

.center-me {
    width: 50px;
    height: 50px;
    background-color: red;
}

.huge {
    width: 250px;
    height: 250px;
    background-color: yellow;
}

.smaller {
    width: 120px;
    height: 120px;
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="center-me huge"></div>
<div class="center-me smaller"></div>
<div class="center-me"></div>
&#13;
&#13;
&#13;