My favorites | Sign in
Project Logo
                
Search
for
Updated Mar 26, 2008 by alexanmtz
Labels: center, layout, jquery, plugin
jQueryCenterPlugin  
Plugin for center any element horizontally and vertically.

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

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 prochaskad2, 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 c...@jivamedia.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 alexanmtz, Jun 10, 2008

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

Comment by nomo17k, 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 alexanmtz, 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.moncho, 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 alexanmtz, 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 NathanBoor, Jan 06, 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 veromaillet, 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


Sign in to add a comment
Hosted by Google Code