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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif' align='left'>Usando CSS:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif' style='float:left;'>À direita
Usando apenas HTML:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif' align='right'>Usando CSS:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif' style='float:right;'>Centralizando
Para que a imagem fique centralizada, você pode usar a tag <center>:
<center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif'></div>
À direita
<div style='text-align:right;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif'></div>
Centralizando
<div style='text-align:center;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/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>
#dire {float:right; padding:5px;}
#esqu {float:left; padding:5px;}
]]></b:skin>
<img id='meio' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif" />
<img id='esqu' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/s800/japones6.gif" />
<img id='dire' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ajuhkFnm_arys30JT3UYcztdgHVS0tpcsSv3kGhWqpebW6sR5BZ8iX4__vuR-SAmlykDQQ3zBQyICRXlOtB-tFcbgLFAoU46X7sS5rUxSRpqt5NSwTAzgxOEwvmtn6XGkYN650mYrAG3/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.
Gostaria de saber como alinhar ao centro duas imagens.
ResponderExcluirTenho 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.
Gilmarzinho, no modo HTML você consegue fazer isso seguindo os exemplos deste post.
ResponderExcluirPara 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!
Gostei dessa postagem e queria saber se posso posta-la em meu Blog,claro dando todos os créditos a vc !
ResponderExcluirCJunior,
ResponderExcluirVocê 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!
ola , meu problema esta alinhar imagens e textos na esquerda agora acho que vou acertar isso
ResponderExcluirvaleu
estou fazendo site em html
ResponderExcluire msm pra mim jah ajudou
=)
é bom pode contar com post desse estilo
Olá, Helen!
ResponderExcluirEstou 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.
CoPiadistas, para resolver isso estude margin e padding: Margens e espaçamento interno.
ExcluirMuito bem explicado, não foi difícil de fazer, obrigada.
ResponderExcluirSeguindo o blog, segue o meu também :)
www.princesasedesejos.blogspot.com.br