CSS no Lanche

No post anterior mostrei como é possível centralizar uma imagem na horizontal e vertical com CSS, independente do tamanho da imagem. A solução utilizava algumas propriedades CSS e uma tag <span> vazia no HTML. Para os semanticistas de plantão isso é um crime.

O que podemos fazer então, criar aquela tag <span> via JavaScript, ou então utilizar uma solução com a utilização de jQuery e o resultado final obtido será o mesmo. Primeiro, vamos a marcação HTML, observe que remove a tag span do código utilizada no exemplo anterior e adicionei uma classe a imagem só para identificação no JavaScript:

<div class="box">
    <img class="centralized" src="img1.jpg" alt="" title="" />
</div>

Agora vamos ao JavaScript, também muito simples e o código está comentado facilitando a compreensão:

$(window).load(function(){
	//Pega a altura do seu pai e armazena em uma variável
	var parent_height = $('.centralized').parent().height();

	//Pega a altura da imagem e armazena em uma variável
	var image_height = $('.centralized').height();

	//Calcula a altura do pai menos a altura da imagem e divide por 2
	//É onde obtemos a distancia que a imagem deve ficar do topo e a armazenamos em uma variável
	var top_margin = (parent_height - image_height)/2;

	//Aqui é onde aplicamos a margem do topo a imagem
	$('.centralized').css( 'margin-top' , top_margin);
});

Observem agora o exemplo.