Description

This plugin allows to center an element bigger than it container by using the relative position.

Demo

Demo

Code

In html <head>

<script type="text/javascript" src="jquery.centR.js"></script>
<script type="text/javascript">
  $(function(){
    $("img").centR(); // Select images to center
  });
</script>

In a jquery.centR.js file

/* jQuery centR */
(function($){
  $.fn.centR = function(){
    return this.each(function(){
      var $this = $(this);
      var $thisWidth = $this.outerWidth();
      var $parent = $this.parent();
      var $parentWidth = $parent.outerWidth();
      
      if ($thisWidth > $parentWidth) {
        $this.css({
          position: "relative",
          left: ( $parentWidth/2
                  - $thisWidth/2
                  - $parent.css("borderLeftWidth").slice(0,-2)
                  - $parent.css("paddingLeft").slice(0,-2)
                ) + "px"
        });
      }
    });
  };
})(jQuery);