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>
<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.