quarta-feira, 2 de janeiro de 2013

Alinhar imagens com CSS

Mulher flutuando no ar

Para alinhar imagens em seu site, o ideal é criar antes as classes na folha de estilos. Isso simplifica o trabalho porque um alinhamento bem feito nunca tem apenas uma propriedade. Quando você flutua uma foto à esquerda, por exemplo, precisa também definir as margens direita e inferior para que o texto não fique grudado à imagem.

.CSS

Para flutuar à esquerda:

.left {float:left; margin-left:0; margin-right:10px; margin-bottom:5px;}

Para flutuar à direita:

.right {float:right; margin-right:0; margin-left:10px; margin-bottom:5px;}

Para centralizar:

.center {float:none; display:block; margin-left:auto; margin-right:auto;}

<HTML>

Exemplo de imagem centralizada:

Imagem centralizada
<img alt="Descreva a imagem" class="center" src="http://lh3.ggpht.com/_HlIyV_enpD8/Sm7bXKK8nqI/AAAAAAAAHJ4/cZg9JQFBtqg/s145/200px-Web-browser-openclipart.svg[5].png"/>

Imagem flutuando à direita

Exemplo de imagem flutuando à direita:

<img alt="Descreva a imagem" class="right" src="http://lh3.ggpht.com/_HlIyV_enpD8/Sm7bXKK8nqI/AAAAAAAAHJ4/cZg9JQFBtqg/s145/200px-Web-browser-openclipart.svg[5].png"/>

Imagem flutuando à esquerda

Exemplo de imagem flutuando à esquerda:

<img alt="Descreva a imagem" class="left" src="http://lh3.ggpht.com/_HlIyV_enpD8/Sm7bXKK8nqI/AAAAAAAAHJ4/cZg9JQFBtqg/s145/200px-Web-browser-openclipart.svg[5].png"/>

Mais de uma imagem centralizada:

Imagem centralizada à esquerda
<div class="center"><img alt="Descreva a imagem" alt='Imagem centralizada à direita' src="http://lh3.ggpht.com/_HlIyV_enpD8/Sm7bXKK8nqI/AAAAAAAAHJ4/cZg9JQFBtqg/s145/200px-Web-browser-openclipart.svg[5].png"/> <img alt="Descreva a imagem" src="http://lh3.ggpht.com/_HlIyV_enpD8/Sm7bXKK8nqI/AAAAAAAAHJ4/cZg9JQFBtqg/s145/200px-Web-browser-openclipart.svg[5].png"/></div>

Você pode:

  • Mudar os nomes das classes, cuidando para mudar tanto na folha de estilos quanto no código HTML.
  • Acrescentar outras declarações às classes.
  • Usar essas mesmas classes para centralizar ou flutuar outros elementos em bloco. Exemplos: <iframe>, <video>, <audio> e <object>.

Até mais!

Foto: Astrologia Cármica

Pix meutedio arroba mail ponto com

3 comentários:

  1. Muito bom, me ajudou demais! Muitíssimo obrigado!

    ResponderExcluir
  2. Pesquisei em vários sites e nenhum me ajudou tanto quanto esse aqui. Muito obrigado seu conteúdo é muito bom!

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.