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, 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í vemos el tipo de código a crear para obtener dichos efectos:
<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….
</p>
<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…
</p>
Saltará verticalmente hasta encontrar el lateral izquierdo libre.
<br clear=»right»>
Saltara verticalmente hasta encontrar el lateral derecho libre.
<br clear=»all»>
<IMG SRC="isla.gif" ALIGN=LEFT> Este texto esta a un lado de la imagen.
<BR> Este tambien esta a un lado de la imagen, en la linea siguiente.
<BR CLEAR=LEFT> Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda.
Que resulta:
Este texto esta a un lado de la imagen.
Este tambien esta a un lado de la imagen, en la linea siguiente.
Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda.
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 la imagen a la parte más baja de la línea.
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.