Question

我为网站设计了一个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);

Answer 1

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

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

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

1 个答案: