Alinhamento Vertical de Divs com JavaScript e JQuery

ARTIGO PUBLICADO POR Túlio Faria ORIGINALMENTE EM:
http://www.tuliofaria.net/alinhamento-vertical-de-divs-com-javascript-e-jquery/ 

Passei um sufoco esses dias tentando alinhar um div dentro do outro apenas com CSS, o qual aliás não consegui nada satisfatório, mesmo achando algumas técnicas interessantes que não chegaram a funcionar comigo. Então parti para o JavaScript, para me ajudar.

Como neste projeto que eu precisava alinhar os divs, eu já estava usando a biblioteca JQuery (que por sinal tem um slogan legal - “Write less, do more” ou seja, escreva menos e faça mais), fiz o alinhamento usando ela mesmo.

Aqui está a explicação do problema:

Onde eu tenho uma div maior, com altura definida. Um div (que tive que adicionar para poder alinhar) com altura variada por conter o texto e uma imagem os quais não tenho controle das suas respectivas alturas.

O primeiro detalhe que temos que fazer é adaptar o código (x)html para ser alinhado. Como disse tive que adicionar um div (o da altura variada), pois sem ele nada feito.

HTML:

1.
<div class=”alinhar”>
2.
<div><img src=”http://www.tuliofaria.net/imagem.jpg” />
3.
texto</div>
4.
</div>

Obs.: não pode haver nenhum espaço ou texto entre os dois divs, porque senão haverá um textNode entre eles e a técnica não funcionará. Tenho que arrumar um workaround para isso e para a preguiça.

Agora vem a parte divertida, JavaScript:

JAVASCRIPT:

1.
var vTime;
2.
function centraliza(){
3.
var ids = new Array();
4.
ids.push(”div.alinhar”);
5.
for(x=0;x
6.
divs = $(ids[x]);
7.
for(i=0; i
8.
h = divs[i].offsetHeight;
9.
hp = divs[i].childNodes[0].offsetHeight;
10.
padd = parseInt((h-hp)/2);
11.
nh = h-padd;
12.
$(divs[i]).css( { height: nh+”px” } );
13.
$(divs[i]).css( { paddingTop: padd+”px” });
14.
}
15.
}
16.
}
17.
$(document).ready(function(){
18.
vTime = setTimeout(”centraliza()”, 1000);
19.
});

O que esse código faz, resumidamente, é pegar a altura dos dois divs, subtrair e dividir esse resultado por dois. Para saber o valor do padding-top que temos que definir no div de altura fixa. Que é o mesmo valor que tiraremos de sua altura.

Por que usei setTimeOut? Porque estava dando alguns problemas de não reconhecer a altura dos divs logo após o carregamento da página, assim depois de 1000ms possivelmente já terá renderizado corretamente.

Para baixarem a JQuery: www.jquery.com

Bom pessoal, até a próxima. Qualquer dúvida, comentem