quinta-feira, 15 de janeiro de 2009

[Defasado] Alinhamento de imagens

Atualizado dia 02/01/2013 às 18h43.
02/01/2013 → Abra o post Alinhar imagens com CSS que está mais atualizado. Este aqui está defasado, mas continuará no ar para consulta histórica.

Alinhando direto na tag <img>

Para alinhar a imagem em uma das margens, podemos usar align ou style=float, veja:

À esquerda

Usando apenas HTML:

<img src='https://lh5.googleusercontent.com/_HlIyV_enpD8/SW-aoy_W6bI/AAAAAAAALQU/ifBbfztcdKU/s800/japones6.gif' align='left'>

Usando CSS:

<img src='https://lh5.googleusercontent.com/_HlIyV_enpD8/SW-aoy_W6bI/AAAAAAAALQU/ifBbfztcdKU/s800/japones6.gif' style='float:left;'>

À direita

Usando apenas HTML:

<img src='https://lh5.googleusercontent.com/_HlIyV_enpD8/SW-aoy_W6bI/AAAAAAAALQU/ifBbfztcdKU/s800/japones6.gif' align='right'>

Usando CSS:

<img src='https://lh5.googleusercontent.com/_HlIyV_enpD8/SW-aoy_W6bI/AAAAAAAALQU/ifBbfztcdKU/s800/japones6.gif' style='float:right;'>

Centralizando

Para que a imagem fique centralizada, você pode usar a tag <center>:

<center><img src='https://lh5.googleusercontent.com/_HlIyV_enpD8/SW-aoy_W6bI/AAAAAAAALQU/ifBbfztcdKU/s800/japones6.gif'></center>

Alinhando com text-align

Você utiliza div com text-align quando não quer que o texto e/ou outro elemento fique em volta de imagem, como nos casos supracitados.

À esquerda

<div style='text-align:left;'><img src='https://lh5.googleusercontent.com/_HlIyV_enpD8/SW-aoy_W6bI/AAAAAAAALQU/ifBbfztcdKU/s800/japones6.gif'></div>

À direita

<div style='text-align:right;'><img src='https://lh5.googleusercontent.com/_HlIyV_enpD8/SW-aoy_W6bI/AAAAAAAALQU/ifBbfztcdKU/s800/japones6.gif'></div>

Centralizando

<div style='text-align:center;'><img src='https://lh5.googleusercontent.com/_HlIyV_enpD8/SW-aoy_W6bI/AAAAAAAALQU/ifBbfztcdKU/s800/japones6.gif'></div>

Alinhando na folha de estilos

Para poupar código você pode definir o alinhamento de imagens na folha de estilos. Há muitas e muitas formas de fazer isso, mas vou dar um exemplo onde cada posição de imagem que desejo tem sua própria ID.

#meio {text-align:center; margin:auto; display:block; padding:5px;}
#dire {float:right; padding:5px;}
#esqu {float:left; padding:5px;}
]]></b:skin>
<img id='meio' src="https://lh5.googleusercontent.com/_HlIyV_enpD8/SW-aoy_W6bI/AAAAAAAALQU/ifBbfztcdKU/s800/japones6.gif" />
<img id='esqu' src="https://lh5.googleusercontent.com/_HlIyV_enpD8/SW-aoy_W6bI/AAAAAAAALQU/ifBbfztcdKU/s800/japones6.gif" />
<img id='dire' src="https://lh5.googleusercontent.com/_HlIyV_enpD8/SW-aoy_W6bI/AAAAAAAALQU/ifBbfztcdKU/s800/japones6.gif" />

Imagem do post no álbum Gifs Animados

02/01/2013 → Abra o post Alinhar imagens com CSS que está mais atualizado. Este aqui está defasado, mas continuará no ar para consulta histórica.
Pix meutedio arroba mail ponto com

9 comentários:

  1. Gostaria de saber como alinhar ao centro duas imagens.
    Tenho esse problema no blogger, e as vezes só consigo colocar uma em baixo da outra.
    No editor antigo consigo fazer, mas tenho que fazer o upload da imagem novamente e marcar "sem alinhamento".
    Terá como fazer isso direto?

    Ah, não sei quase nada de HTML, mas estou me esforçando pra aprender, hehehe.

    Obrigado.

    ResponderExcluir
  2. Gilmarzinho, no modo HTML você consegue fazer isso seguindo os exemplos deste post.

    Para alinhar duas imagens a definição deve estar na tag <div> e não na tag <img>. Se tiver qualquer definição de alinhamento em <img> você tem que apagar para funcionar.

    Volte sempre!

    ResponderExcluir
  3. Gostei dessa postagem e queria saber se posso posta-la em meu Blog,claro dando todos os créditos a vc !

    ResponderExcluir
  4. CJunior,

    Você não pode colocar este post em seu blog.

    Mas você pode citar. Existem várias formas de fazer isso, sugiro que leia o post Como citar outro texto em seu blog.

    Obrigada por perguntar. Volte sempre!

    ResponderExcluir
  5. ola , meu problema esta alinhar imagens e textos na esquerda agora acho que vou acertar isso
    valeu

    ResponderExcluir
  6. estou fazendo site em html
    e msm pra mim jah ajudou
    =)
    é bom pode contar com post desse estilo

    ResponderExcluir
  7. Olá, Helen!
    Estou construindo um blog (no Blogger) e estou enfrentando problemas a respeito do alinhamento das imagens nas postagens.
    Uso um efeito 'hover' que ao passar o mouse sobre a imagem, a mesma aumenta de tamanho. Mas na página principal está tudo ok, o problema é que ao acessar a página de um post específico a imagem fica desalinhada. =(

    Por favor, se souber e estiver disponível para responder, envie-me pelo seguinte e-mail: contato@copiadas.com
    Ficarei muito grato.

    ResponderExcluir
  8. Muito bem explicado, não foi difícil de fazer, obrigada.


    Seguindo o blog, segue o meu também :)

    www.princesasedesejos.blogspot.com.br

    ResponderExcluir

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