jQueryCenterPlugin

Plugin for center any element horizontally and vertically.
center, layout, jquery, plugin

Updated Feb 4, 2010 by alexan...@gmail.com

Introduction

This plugins uses a css method to centralize a element, horizontally and vertically.

USAGE

With no parameter, the plugin center a element in both directions

$("class_or_id").center();

You can especify any direction of aligment

$("class_or_id").center({

   horizontal: false // just vertical

});
$("class_or_id").center({

   vertical: false //just horizontal

});

Support

This plugin was tested in IE 6, IE 7, Safari 3, Firefox 2+ Jquery version 2.1+

Dependencies

Dimensions Plugin - http://brandonaaron.net/docs/dimensions/ - required

Test page

http://www.alexandremagno.net/jquery/plugins/center

Author

Alexandre Magno - http://blog.alexandremagno.net

License

http://www.opensource.org/licenses/mit-license.php

Comment by prochask...@gmail.com, Apr 25, 2008

This code works wonderfully for the most part -- however, I have a DIV I need centered that uses a z-index, so it is absolutely-positioned. It workes fine in everything but IE. Is there a workaround?

Here is the CSS I was using for the DIV:

#flashmovie_cont {

position: absolute; z-index: 3; width: 800px; /left: 50%; top: 30px; margin: 0px; padding: 0px;/

}

Comment by Charley...@gmail.com, Apr 29, 2008

This plugin works great. I would like a version that centers a div inside another block container, such as another div or table cell.

Comment by project member alexan...@gmail.com, Jun 10, 2008

I don´t know why isnt working because this method uses absolute position. Can you put a test page?

Comment by nomo...@gmail.com, Aug 26, 2008

Thanks for a useful plugin. One additional feature that may be useful is to have an option to center an element within a window. Currently, it seems when the height of <body> is shorter than the window height, the element gets centered relative to the <body> height. Is this easy to implement?

Comment by project member alexan...@gmail.com, Sep 24, 2008

It´s seens not to be so easy, but I´m trying to explore more the dimensions plugin to achieve the desired result. There´s some issues that are happen.

Comment by matias.m...@gmail.com, Sep 25, 2008

It didn't worked for me in IE 6, but I found why. The CSS properties: "border-top-width" and "border-bottom-width" may acept number values as string values. By default, IE value is "medium" (not 0).

So, here is my "hack" for IE 6:

var borderTop = isNaN(parseInt($self.css("border-top-width"))) ? 0 : parseInt($self.css("border-top-width")); var borderBottom = isNaN(parseInt($self.css("border-bottom-width"))) ? 0 : parseInt($self.css("border-bottom-width"));

I tested it on IE 6, Firefox 2 and Chrome (all on Windows only) and worked fine.

This is just a patch for me, but maybe could work for others.

Comment by project member alexan...@gmail.com, Sep 30, 2008

Thanks for contribution. I guess the dimensions plugin has inner width and outer width methods that can calculate the right dimension. I´m working in a new version.

Comment by EvanLovely, Oct 10, 2008

I would like to be able to center an element within a div also. Is there something I'm missing, or can this not do it? Thanks anyway. Great plugin!

Comment by NathanB...@gmail.com, Jan 6, 2009

Hi there,

This is very usefull... I use you're code in IE7, and found that I had to change something..

Below is what I changed:

//get the paddings var paddingTop = isNaN(parseInt($self.css("padding-top"))) ? 0 : parseInt($self.css("padding-top")); var paddingBottom = isNaN(parseInt($self.css("padding-bottom"))) ? 0 : parseInt($self.css("padding-bottom")) //get the borders var borderTop = isNaN(parseInt($self.css("border-top-width"))) ? 0 : parseInt($self.css("border-top-width")); var borderBottom = isNaN(parseInt($self.css("border-bottom-width"))) ? 0 : parseInt($self.css("border-bottom-width"))

AND..

// get the half minus of width and height var halfWidth = ((width / 2) (-1)) - width;

I added "- width" to halfWidth, because you have to substract the width of the element itself...

Comment by veromail...@gmail.com, Jul 30, 2009

Hi,

Thanks for sharing your work. Your code dont't seems to work on any other browser than Firefox. Is there something I do wrong or is there one of the pasted hack I should use ?

Thanks

Comment by carlos....@gmail.com, Nov 25, 2009

Hey thanks for this plugin realy very easy to use, with testing on IE8, FF 3.x, Chrome 3.x, SF 4.x and without any problem.

► Sign in to add a comment