|
jQueryCenterPlugin
Plugin for center any element horizontally and vertically.
IntroductionThis plugins uses a css method to centralize a element, horizontally and vertically. USAGEWith 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
});
SupportThis plugin was tested in IE 6, IE 7, Safari 3, Firefox 2+ Jquery version 2.1+ Dependencies
Test pagehttp://www.alexandremagno.net/jquery/plugins/center AuthorAlexandre Magno - http://blog.alexandremagno.net License |
Sign in to add a comment
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 {
}This plugin works great. I would like a version that centers a div inside another block container, such as another div or table cell.
I don´t know why isnt working because this method uses absolute position. Can you put a test page?
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?
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.
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.
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.
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!
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:
AND..
I added "- width" to halfWidth, because you have to substract the width of the element itself...