Posicionar imagem em div

[Hamilcar 1]

Pessoal como faço para posicionar uma imagem em uma div, sendo que a imagem ficará centralizada tanto na horizontal como na vertical, obrigado a todos.

[Megadeth 2]

Você já esperimentou colocar um Align="center", nas propriedades da imagem.

[Tiago Cardoso 1]

Movido: JavaScript p/ Webstandards: CSS / XML / XHTML

[Luiz Henrique 1]

pode ser como o Megadeth postou ou img {width:x; heigth:x} posicione em locais especificos desta forma

[Guilherme Rambo 4]

se a imagem for um background:

div {background: url(imagem.gif) no-repeat center center;}

e se for numa tag img:

div, div img {vertical-align:middle;text-align:center;}

acho q isso resolve ;)

[camilo.oliveira 0]

align:center; ?não seria:text-align:center ?(eu sei que é uma imagem)

[Guilherme Rambo 4]

align:center; ?não seria:text-align:center ?(eu sei que é uma imagem)

Eh verdade camilo, eu que me enganei, vou editar ali, valeu por falar http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Maujor 144]

Dois são os métodos de inserção de uma imagem dentro de uma DIV

1. Incluir a imagem no código de marcação usando o elemento IMG;
   
2. Declarar a imagem nas CSS;
   

A escolha de um outro método depende de cada caso particular.

-------------------------------------------------------------------------------

Vamos supor uma DIV de 400 x 200px e uma imagem de 310 x 150px.

 

1- Imagem no código

Quando você incluir a tag IMG dentro da tag DIV a imagem será renderizada

dentro da DIV "colada" no canto superior esquerdo.

Use uma regra CSS para "puxar" a imagem para o centro da DIV declarando

img {position:relative;left:50%;top:50%;}

Isto coloca o canto superior direito da imagem no centro da DIV.

Mas precisamos que o centro da imagem coincida com o centro da DIV.

Então"puxamos" a imagem para a esquerda e para cima de um valor

igual a metade da largura e da altura da imagem (155 e 75px - metade de 310 x 150px) declarando:

img {margin-left:-155px;margin-top:-75px;}

------------------------------------------------------------------------------

2- Imagem nas CSS

div {background:#fff url(imagem.jpg) no-repeat center;

------------------------------------------------------------------------------

Construi uma página web mostrando os dois métodos. Visite a página e abra o código fonte.

[Giovani 104]

Depois dessa explicação.....não tem o q reclamar!!!!

Muito obrigado Maujor!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Hamilcar 1]

Valeu mesmo pessoal, me ajudaram muito, obrigado a todos.

[Giovani 104]

Precisando a gente sempre tenta ajudar!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif