Este plugin centraliza qualquer elemento através do método CSS da margem negativa.

Como usá-lo

Sem nenhum argumento, o método do plugin cetraliza horizontalmente e verticalmente.

$("class_or_id").center();

Você pode também especificar a direção de alinhamento

$("class_or_id").center({

    horizontal: false // somente vertical

});

$("class_or_id").center({

vertical: false //somente horizontal

});

O plugin no site do jQuery

http://plugins.jquery.com/project/elementcenter

Suporte

Este plugin foi testado no IE 6, IE 7, Safari 3, Firefox 2.0

* Não funcionou no Firefox 3.0 e no Google Chrome. Estou tendo dor de cabeças com os dois ultimamente. Para mim uma grande decepção. Muitos Javascript estão lentos, assim como o Flash.

Irei trabalhar em uma próxima versão usando integralmente o Dimensions, que funciona muito bem.

Dependências

Este plugin requer o Dimensions plugin para funcionar corretamente

Página de teste

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

Documentação original

http://code.google.com/p/jquerydevbrazil/wiki/jQueryCenterPlugin

Download

http://code.google.com/p/jquerydevbrazil/downloads/list

Autor

Alexandre Magno – http://www.alexandremagno.net

Licença

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

By Jquery, Plugins36 comentários em jQuery Center plugin

36 Replies to “jQuery Center plugin”

  3. Hi, I came across your plugin looks good. I have a question of why you chose GPL over MIT or BSD license for a simple utility. Using the gpl will cause people pass over it since it would require them to license all of their code under the gpl.

    Good work by the way.

    Responder

  8. Muito bom o seu plugin estou usando e está funcionando bem no IE 6/7 e no firefox 2. Já no firefox 3 ele não funciona legal. Testei no Ubuntu 8.04 com o firefox 3.

    []s
    Wilton

    Responder
  10. Pingback: jquery plugins by name « Web Developer

  14. Hi,

    I really think this plugin works great! I have a question though…

    The plugin centers(veritical) the element by computing the page’s height and not the screen’s?

    Responder

  21. @imKarl. Great! Some people report bugs, it seens that you are using in simple situations, because in new version I’m dealing with padding, marging, diferent scenarios to make work in all cases, but if you’re not having problem it’s great!

    Responder

  22. Hi!

    You should consider adding scrollTop() and scrollLeft() values, beacause when the element is in body, it is centered relative to the window size. When page is scrolled down f.ex. 2 times window height, centered div is unvisible, because it is at the top of page, not at the visible center.

    Best regards!

    Responder

  24. Alex Hi.

    I started to use this plugin but I encounter some issues
    I have the exact same files but only the content (to be centered) is different. The element to be centered is a div with some paragraphs and headings. If I have small amount of text the element is near to the center (not perfect) but if I have some paragraphs, the text is not centered at all. I am sending you an email with the site for you to test if you can. (tested in ff3.6 and 4.0

    Thanks in advance for the plugin.

    Responder

  27. Thanks! Great plugin. After using it, I had to apply a small fix for the CSS of the element to be centered. I had to set the position CSS to “relative” since it is hard-coded inside the plugin to “absolute”. Otherwise, the result is that the DIV element being centered is overlapping with the other elements below it.

    Hope this feedback gives room to improvements.

    Tarek.

    Responder

  28. Hello and thanx for your fine js-snippet. Two items I would propose for enhancement for dynamic content purposes:
    1. If the element to center is empty it should not be displayed, maybe this way
    [ if ($self.height() < 30) { cssProp.display = 'none';]
    2. In responsive layouts, when the width becomes < 700px colums overlap. So best is the script does nothing in that case.
    Could you help with that code?

    Responder

    1. Hi,

      Thanks for contribution and feedback, I will insert the conditional line. I did make any test for responsive, but I will see what I can do for support it. I will see what I can do and release a new version.

      Responder

          1. Hey,
            found only old stuff and 404 pages with “vertical && center && jQuery && alexandre”

  29. (I may have an old version)
    I made a few changes– there was an error with mediaPadding and/or mediaBorder. mediaBorder was NaN and so the height css was not properly calculated when vertically centering:

    //get the media of padding and borders
    var mediaBorder = ( borderTop + borderBottom ) / 2;
    mediaBorder = isNaN(mediaBorder) ? 0 : mediaBorder;

    var mediaPadding = ( paddingTop + paddingBottom ) / 2;
    mediaPadding = isNaN(mediaPadding) ? 0 : mediaPadding;

    One more change to dimensions, because a space between words in a centered div caused word wrap when the width was applied by jquery.center:

    //get the dimensions using dimensions plugin
    var width = $self.width() + 1;
    var height = $self.height() + 1;

    Thanks for the plugin! works like a charm, so far.

    Responder

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *