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:
-
-
<div><img src="http://www.tuliofaria.net/imagem.jpg" />
-
texto</div>
-
</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.
[UPDATED 10/07/2007]
Agora vem a parte divertida, JavaScript, para conferir o código entre aqui e veja o Código Fonte de Exemplo.
Obs.: me desculpem por não ter percebido esse erro. Realmente o editor do blog cortou uma parte do fonte JS.
[/UPDATED 10/07/2007]
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
