[Resolvido] Centralizar IMG dentro de uma div

[Marcelo Garbin 30]

Buenas galera tudo bem?

 

Tenho uma dúvida, como posso centralizar uma imagem no meio da div, a qual somente tenho fixa a largura. A altura é variavel.

 

Tenho uma div e nela dentro uma imagem exemplo:

 

Quero deixa ela assim(isso com qualquer imagem sendo que a altura é variavel(altura minima de 90px, porém pode ser maior):

 

 

Alguém tem alguma solução pra isso? ^^

 

Obrigado.

[Willian Makoto 6]

margin-top:-20%

[Marcelo Garbin 30]

margin-top:-20%

 

 

Eu já havia feito isso, porém quando a imagem fica com o altura e largura igual da div acontece isso:

 

 

E agora zé? hehehe

[JCMais 75]

Tem várias formas, desde simples, até usando Javascript.

 

Se a imagem for apenas para representação visual, e SEO não é um requerimento, você pode definir ela como bg:

http://jsfiddle.net/JCMais/Ay332/1/

 

Porém se a imagem representa um conteúdo importante relativo à página, SEO é um requerimento e suporte para IE7- não é necessário, você pode definir o container da imagem com display: table-cell:

http://jsfiddle.net/JCMais/Ay332/2/

[Marcelo Garbin 30]

Tem várias formas, desde simples, até usando Javascript.

 

Se a imagem for apenas para representação visual, e SEO não é um requerimento, você pode definir ela como bg:

http://jsfiddle.net/JCMais/Ay332/1/

 

Porém se a imagem representa um conteúdo importante relativo à página, SEO é um requerimento e suporte para IE7- não é necessário, você pode definir o container da imagem com display: table-cell:

http://jsfiddle.net/JCMais/Ay332/2/

 

 

Ooww JCMais... pois é.. tava pensando em até fazer uma "gambi" com PHP, mas acho que essa sua alternativa ajuda, vou testar e postar os resultados, quanto ao SEO não é necessário pois é para sistema interno.

 

Minha única restrição é para funcionar no IE7 também.

 

Volto para dar um feedback..

 

Obrigado!

[Bruno Augusto 417]

Eu não tenho tal versão instalada, mas você pode experimentar esse behaviour para IE 6 e 7 que simula com JavaScript o comportamento das propriedades table-*, como a table-cell que o JC usou.

 

:thumbsup:

[Marcelo Garbin 30]

Ae galera me ajuda ai, não to conseguindo...

 

Seguinte quero que quando clicar em enviar a imagem a mesma que aparecer fica no meio do quadrado ali, tentei fazer o que o JCMais me passou mas não deu muito certo.

 

Segue o link: Carregar imagem

[Marcelo Garbin 30]

Tópico Resolvido :grin:

 

Utilizei o PHP + CSS para centralizar imagem com alturas diferentes.

 

Usei a função:

<style type="text/css">
.preview{
position:relative; 
left:50%; 
top:50%; 
}
#preview{
border:1px solid #999;
display:block;
width:150px;
height:100px;
overflow:hidden;
}
</style>

//Calculo para centralizar imagem na div //
$imnfo = getimagesize("./imagens/".$img_nome);
$img_w = $imnfo[0];//largura
$img_h = $imnfo[1];//altura
$mW = $img_w/2;
$mH = $img_h/2;

<div id='preview'>
<img src="./imagens/<?=$img_nome?>" style="margin-left:-<?=$mW?>px;margin-top:-<?=$mH?>px;" class="preview" />
</div>

 

Obrigado a todos pela ajuda. :thumbsup: