Olá a todos, a quanto tempo não escrevo! Isto porque fiquei um tempo fora, por conta de troca de empregos e algumas coisinhas mais.
Porem hoje vou falar sobre como centralizar um elemento na tela independente da resolução do pião e isso feito com jQuery sem precisar de nenhum tipo de plugin.
A outros modos de se fazer, por exemplo, usando
CSS, aonde você defini o tamanho da div e aplica alinhamento automático, veja:
div#center {
width: 500px;
height: auto;
margin: auto;
}
Também há outros modos de se fazer isso em
CSS, mas esse não seria o foco agora, então vamos ao que interessa.
Há uma extensão simples de ser usada que facilita todo este trabalho.
Ela pode ser utilizada dentro do seu .js separado, ou em qualquer outra extensão que seja seu documento, então...
1- Passo, copiamos a extensão abaixo ao inicio do seu documento:
jQuery.fn.center = function() {
var w = $(window);
this.css("position","absolute");
this.css("top",(w.height()-this.height())/2+w.scrollTop() + "px");
this.css("left",(w.width()-this.width())/2+w.scrollLeft() + "px");
return this;
}
Esta é uma classe estendida que fará todo o trabalho de centralizar seu elemento, podendo assim usá-la diversas vezes com uma única chamada sem precisar reescrever o código.
2- Passo, este é o segundo e último passo, vamos agora chamar a função a cima em seu elemento:
...
...
O
center é o
#ID da div ou do elemento que deseja que fique centralizada na tela.
Caso precise usa-la em outro elemento basta adicionar mais uma linha com a
classe ou o
#ID do seu novo elemento.
...
...
Simples assim !!
Abraço!
