Completo tutorial de HTML - Alineación de imagenes con HTML

Vimos en su momento el atributo align que nos permitía alinear el texto a
derecha, izquierda o centro de nuestra página. Dijimos que este atributo no era
exclusivo de la etiqueta <p> sino que podía ser encontrado en otro tipo de
etiquetas.

---

Pues bien, <img> resulta ser una de esas etiquetas que aceptan este atributo
aunque en este caso el funcionamiento resulta ser diferente.

---

Para alinear una imagen horizontalmente podemos hacerlo de la misma forma que el
texto, es decir, utilizando el atributo align dentro de una etiqueta <p> o
<div>. En este caso, lo que incluiremos dentro de esa etiqueta será la imagen en
lugar del texto:

---

Este código mostrará la imagen en el centro:

---

<div align="center"><img src="logo.gif"></div>
Sin embargo, ya hemos dicho que la etiqueta <img> puede aceptar el atributo
align. En este caso, la utilidad que le damos difiere de la anterior.

---

El hecho de utilizar el atributo align dentro de la etiqueta <img> nos permite,
en el caso de darle los valores left o right, justificar la imagen del lado que
deseamos a la vez que rellenamos con texto el lado opuesto. De esta forma
embebemos nuestras imágenes dentro del texto de una manera sencilla.

---

Aquí podéis ver el tipo de código a crear para obtener dicho efecto:

---

<p>

---

<img src="imagen.gif" align="right">Texto tan extenso como queramos que cubrirá
la parte izquierda de la imagen. Sigo poniendo texto para que se vea el efecto,
Bla bla bla bla bla bla bla...

---

</p>

o


<p>

---

<img src="imagen.gif" align="left">Texto tan extenso como queramos que cubrirá
la parte derecha de la imagen. Sigo poniendo texto para que se vea el efecto,
Bla bla bla bla bla bla bla...

---

</p>

Si en algún momento deseásemos dejar de rellenar ese espacio lateral, podemos
pasar a una zona libre introduciendo un salto de línea <br> dentro del cual
añadiremos un atributo: clear

---

Así, etiquetas del tipo:

---

<br clear="left">

---

Saltara verticalmente hasta encontrar el lateral izquierdo libre.

---

<br clear="right">

---

Saltara verticalmente hasta encontrar el lateral derecho libre.

---

<br clear="all">

---

Saltará verticalmente hasta encontrar ambos laterales libres.

---

Existen otro tipo de valores que puede adoptar el atributo align dentro de la
etiqueta <img>. Estos son relativos a la alineación vertical de la imagen.

---

Supongamos que escribimos una línea al lado de nuestra imagen. Esta línea puede
quedar por ejemplo arriba, abajo o al medio de la imagen. Asimismo, puede que en
una misma línea tengamos varias imágenes de alturas diferentes que pueden ser
alineadas de distintas formás.

---

Estos valores adicionales del atributo align son:

---

top
Ajusta la imagen a la parte más alta de la línea. Esto quiere decir que, si hay
una imagen más alta, ambas imágenes presentaran el borde superior a la misma
altura.

---

bottom
Ajusta el bajo de la imagen al texto.

---

Absbottom
Colocara el borde inferior de la imagen a nivel del elemento más bajo de la
línea.

---

middle
Hace coincidir la base de la línea de texto con el medio vertical de la imagen.

---

absmiddle
Ajusta la imagen al medio absoluto de la línea.

---

Estas explicaciones, que pueden resultar un poco complicadas, pueden ser más
fácilmente asimiladas a partir con un poco de practica.

---

Nos queda explicar como introducir debajo de la imagen un pie de foto o
explicación. Para ello tendremos que ver antes de nada las tablas, en el
próximos capítulos...