Center a large element in a thinner content
This plugin allows to center an element bigger than it container by using the relative position.
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);