|
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...
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