Alinear imágenes con CSS: a Derecha, Centro e Izquierda

Esto va para crear una base de recursos sobre HTML y CSS de mi artículo principal, sobre como crear un blog y es la continuación obligatoria al artículo sobre como centrar imágenes con CSS.

En este caso a la derecha e izquierda usando uno de los más importantes atributos de CSS para el diseño con DIV, que luego entraremos a detalle en ello.

Este tutorial no trata del diseño con imágenes con CSS, lo veremos próximamente, sino de objetos metidos dentro del texto.

Como se dijo anteriormente, CSS no tiene ningún atributo especial para centrar imágenes y es todo un dolor de cabeza para algunos "descubrir la manera", aquí cabe cuestionar lo que les costaba hacer un atributo que fuera especial para centrar objetos cuando en el caso de los laterales se puede alinear a derecha e izquierda asignando un atributo dentro de la tag de IMG, por que nos valdremos de un simple truco para centrar una imagen.

Recordar que a diferencia del texto, donde no es necesario alinear a la izquierda, en el caso de las imágenes incluso es recomendable hacerlo.

Para alinear una imagen simplemente usamos el atributo CSS Float, en el cual podremos usar Left y Right para establecer una alineación a la derecha y a la izquierda.

Usando flotar (Izquierda y derecha)
Pueden ver en otros artículos la forma en que se usan las clases para vincular esta propiedad desde una archivo CSS para no repetir los pasos:

Para la izquierda agregamos float: left;

<img style="float:left;" src="http://tusitio/imagen.jpg" alt="descripción" />

Para la derecha agregamos float: right;

<img style="float:right;" src="http://tusitio/imagen.jpg" alt="descripción" />

Resultado Izquierda: (Lo he encerrado en un DIV con la misma altura que la imagen)

Resultado Derecha: (Lo he encerrado en un DIV con la misma altura que la imagen)

Esto es muy útil para mezclar texto con imágenes o con otras imágenes sin maquetar.

Si necesitamos más espacio entre las imágenes y el texto usamos la propiedad CSS, margin para establecer dicha separación.

Clear
El uso del atributo float, permite flotar los objetos, no importando cuantos sean, todos se alinearan en el espacio disponible, si se quiere controlar esto existe el parámetro clear.

Clear es importante pues evita que otros elementos flotantes compitan por una posicion si se alinean a la izquierda o la derecha.

por ejemplo para:

<img src="imagen 1.jpg" style="float:left;clear:left;" />
<img src="imagen 2.jpg" style="float:left;" />

Ambas imágenes estarán flotadas a la izquierda, pero la que tiene el parámetro clear:left evitara que la segunda imagen se alineé primero a la izquierda, lo mismo pasaría con clear:right. Por último clear:both evitaría que ningún objeto con float se alineé con un objeto que posea esta propiedad a la vez que con float, por ejemplo "float:left;clear:both;

Alinear al centro

Yo nunca dije que no se pudiera alinear una etiqueta img al centro, aunque la realidad no existe un parámetro que lo haga específicamente, hacemos lo mismo que con un DIV, usamos margin:0 auto; agregando el parámetro display:block; para que se comporte como un DIV:

<img style="display:block;margin:0 auto 0 auto;" src="http://tusitio/imagen.jpg" alt="descripción" />

Por supuesto que esta imagen no flotará y no se llevará muy bien con float, en la imagen de abajo ambas imágenes con float son empujadas hacia abajo:

Alinear al centro con margin en una div con tamaño definido
Si queremos centrar una imagen en un div con un ancho (width) conocido será sencillo usando margin con sus variantes margin-left y margin-right junto con float, por ejemplo:

Tendríamos que evaluar el tamaño de las imágenes y sus separaciones, en este caso, el DIV mide 500px y las imágenes 100px, por lo que hay una separación de 100 px entre ellas, así pues asignaremos a las tres float:left, aunque también podemos dar a la última float:right para ahorrarnos parámetros.

Algunos ejemplos de como se resolveria el mismo caso

1.-margin-left y con la ultima imágen flotada a la derecha sin margin-left:

<div style="width:500px; height:100px;">
<img src="imagen-1.jpg" style="float:left;"/> 
<img src="imagen-2.jpg" style="float:left;margin-left:100px;" />
<img src="imagen-3.jpg" style="float:right;" />
</div>

2.-float:left y margin-left

<div style="width:500px; height:100px;">
<img src="imagen-1.jpg" style="float:left;"/> 
<img src="imagen-2.jpg" style="float:left;margin-left:100px;" />
<img src="imagen-3.jpg" style="float:left;margin-left:100px;" />
</div>

3.-float:left y margin:righ, ultima imagen flotada a la derecha

<div style="width:500px; height:100px;">
<img src="imagen-1.jpg" style="float:left;margin-right:100px;"/> 
<img src="imagen-2.jpg" style="float:left;px;" />
<img src="imagen-3.jpg" style="float:right; />
</div>

4.-float:left y margin:right (la ultima no lleva porque son dos espacios de 100px)

<div style="width:500px; height:100px;">
<img src="imagen-1.jpg" style="float:left;margin-right:100px;"/> 
<img src="imagen-2.jpg" style="float:left;margin-right:100px;" />
<img src="imagen-3.jpg" style="float:left; />
</div>

5.-Sólo float left y con margin en la imagen del centro (los valores de margin van en orden top, left, bottom, right, el ultimo valor 100px no es necesario pornerlo si es el mismo que left);

<div style="width:500px; height:100px;">
<img src="imagen-1.jpg" style="float:left;"/> 
<img src="imagen-2.jpg" style="float:left;margin: 0 100px; 0" />
<img src="imagen-3.jpg" style="float:left; />
</div>