Centralizar imagem na vertical com JavaScript
Postado por: Pedro Rogério emNo 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.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Não dá na mesma aplicar um ‘position’ e mandar aquele esquema com porcentagem e margem negativa? Acaba não usando “span” oO
Aí você precisa ter o tamanho da imagem definido, essa técnica se aplica a imagens que independente de seu tamanho, ela irá ficar centralizada na vertical.
E ai Pedro beleza? Usei esse scrpt em uma página que estou chamando outras divs dentro da mesma página sem dar refresh com um sistema de paginação igual ao desse link:
http://www.ctviva.com.br/informativo_lista_frame.html
Na primeira página o seu script centraliza as imagens normalmente, porém quando eu chamo a div n° 2 o script não funciona, sabe o que pode ser?
Obrigado
Eu uso a mesma lógica para centralizar, porém eu uso um for each.
$(window).load(function(){
$(“.centralizarVertical”).each(function(){
$(this).css({‘margin-top’:($(this).parent().height()-$(this).height())/2+’px’});
});
});
Lembrando que esse script não serve só para imagens, ele vai centralizar todos os elementos pertencentes àquela classe.
Preciso de centralizar imagens na vertical, mas cada uma destas imagens são links para abrir imagens maiores. Infelizmente, neste caso (de as imagens serem links) o script não funciona!
É pq neste caso o elemento pai é um a e a tag a é inline. Define no CSS estes a como display: block; height: 100%. Ou
$(window).load(function(){
$(“.centralizarVertical”).each(function(){
$(this).css({‘margin-top’:($(this).parent().parent().height()-$(this).height())/2+’px’});
});
});
Cola essa parte do html.