jquery絕對中心返回margin-left 0

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％，比利潤率左其寬度的一半。 這是因爲你可能想讓它在較小的設備上工作（響應）。

事情是這樣的：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>