Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless


Imagem no meio de uma DIV

Publicado em: 2006-12-12 — 14.092 visualizacoes

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 é uma decisão do desenvolvedor em função das particularidades de cada caso.

Vamos supor uma DIV com as dimensões de 400 x 200px e uma imagem com dimensões iguais a 310 x 150px.

Método da imagem no código

Quando você inclui uma imagem dentro de uma DIV usando a tag IMG a imagem será renderizada dentro da DIV “colada” no canto superior esquerdo. Então, use uma regra CSS para “puxar” a imagem para o centro da DIV declarando:

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

A regra CSS acima mostrada posiciona o canto superior direito da imagem no centro da DIV. Contudo queremos que o centro da imagem coincida com o centro da DIV. Para obter este posicionamento precisamos “puxar” a imagem para a esquerda e para cima, de um valor igual a metade da largura e da altura da imagem, ou seja (155px para a esquerda e 75px para cima — metade de 310px e 150px respectivamente). Conseguimos isto declarando:

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

O esquema mostrado na figura abaixo esclarece o posicionamento

Esquema de posicionamento

Método da imagem nas CSS

Ao optar por este método basta declarar a posição center na declaração de background.
Quando se declara apenas uma das duas posições para uma imagem de background, a posição omitida e automaticamente assumida como center.

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

Para maiores detalhes sobre este método consulte: A propriedade background.

Consulte uma página Web mostrando na prática os dois métodos. Abra o código fonte da página, para ver a aplicação das regras explicadas.

Retweet this post

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Livros do Maujor

capa livro html      capa livro html      capa livro html      capa livro html

Logo twitter

Enquete

  • Lamento. Não há enquetes no momento.

Esta matéria foi publicada em: 2006-12-12 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/12/12/imagem-no-meio-de-ume-div/trackback no seu site.



15 comentários na matéria: “Imagem no meio de uma DIV”

  1. Carlos EduardoNo Gravatar disse:

    Exatamente!

    Como foi dito, depende da necessidade do caso.
    Caso seja somente para estilização visual, o caso da imagem no CSS é o que vale mais a pena.

    Agora, se a parte fizer parte do conteúdo, utilizo-a diretamente no HTML.

    Parabéns pelo artigo.

  2. DiegoNo Gravatar disse:

    Iniciei a trabalhar com CSS há alguns meses.

    Utilizo imagens pelo HTML (img) quando construo páginas dinâmicas (PHP), devido não ser possível incluí-las via CSS.

    Sonho com o dia em que será possível incluir código PHP dentro do CSS.
    Seria o auge do CSS!!!

  3. Leonardo L ProcópioNo Gravatar disse:

    Parabens!!!

  4. Alfredo HolffmanNo Gravatar disse:

    Diego, este dia pode estar longe, mas existem outras soluções para isso.
    Por exemplo como fiz recentemente, ao invés de chamar o arquivo “.CSS” passei a chamar o arquivo “.PHP” e passando um parâmetro pela URL consigo imprimir o CSS na tela.
    Funcionou muito bem e pude parar de inserir imagens na mão dentro do HTML.

  5. PauloNo Gravatar disse:

    Muito bom

  6. AmandaNo Gravatar disse:

    Oi, sou leiga no assunto… sei um pouco de html, to levando um baile do css. Mas to aprendendo aos pouquinhos. Queria um help. To com dificuldade de achar solução pra um problema no meu blog. Coisa ridícula, mas que me incomoda. Dá uma olhada no meu blog, vai lá em cima (onde se maximiza, minimiza) e restaura… Dá uma olhada na imagem. Ela não é do mesmo tamanho que o background. Não sei como fazer pra que ela acompanhe o resto do blog. Me ajuda, porfavor. Talvez seja só um detalhe que eu não to sabendo arrumar.
    Desde já te agradeço.
    Abraço
    Amanda

  7. TrevisanNo Gravatar disse:

    Maujor,
    no exemplo do método da imagem nas css, não seria o background da div? ao inves da img?

    desculpa. se estiver enganado exclua este comentário.

    Abraço

    Roberto Trevisan

  8. MaujorNo Gravatar disse:

    @Trevisan,
    Sim! houve um engano ali.
    A coreção foi feita.
    Grato

  9. júnioNo Gravatar disse:

    Muito obrigado, pela informação.De grande valia.-Saúde e paz para ti.

  10. DiegoNo Gravatar disse:

    Obrigado Alfredo Holffman!

    Jamais havia pensado dessa maneira! Gostei muito da idéia!

  11. chicoNo Gravatar disse:

    Nossa isso me ajudou muito em um site q estou fazendo !!!

  12. ReneNo Gravatar disse:

    Pessoal, uma coisa que me persegue é o seguinte:

    tenho 10 imgens, farei um laço em php para exibi-las. porem algumas das imagens são mais altas do que largas, e outras vice-versa. Como fazer o metodo da imagem no código? Pergunto isso pois, terei de criar um link com esta imagem para por exemplo abrir a imagem grande. e agora? Vertical alingment, não encontrei um tutorial que me explicasse a lógica, e eplo visto para imagens tb, precisa saber o tamanho XxY da imagem.

  13. AvronnNo Gravatar disse:

    Olá
    Eu tenho uma folha de estilos onde coloco uma figura como se fosse marca d’agua, eu quero colocar junto agora mais uma figura, no topo das páginas que acessarão estes estilos, mas não consigo fazer isto, sou iniciante e estou apanhando.
    Obrigado

  14. FranciscoNo Gravatar disse:

    Olá

    Sou novo no CSS e gostaria que me ensinassem como construir uma Div. É que eu estou construindo um site e preciso de uma área com duas fotos uma do lado da outra e sobre elas peciso colocar texto. Estou inserindo tudo cm imagem mas não consigo colocar o texto sobre as imagens. Desculpe-me a “inocência” no assunto.
    Obrigado

  15. karpovlNo Gravatar disse:

    Pegue seu arquivo CSS e salve-o como PHP e ao invés de fazer a referência do CSS faça um include do PHP em sua página e poderás manipular toda a estrutura css dinamicamente dentro de seu script. Isso funcionará para qualquer linguagem de programação.

Comentário:






Subscrição de comentários sem comentar

Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Voltar ao topo

PR Tool


ir topo