Alineamiento de imágenes

En los ejemplos vistos al principio, en los que insertábamos imágenes junto con texto normal, la parte inferior de la imagen quedaba alineada con la parte inferior del texto. La etiqueta IMG tiene un atributo llamado ALIGNque nos permite controlar el alineamiento vertical de la imagen en función del texto que le rodee o de otras imágenes de la misma línea. El atributo ALIGN puede tomar cinco valores diferentes. En primer lugar veremos aquellos que nos permiten controlar la alineación vertical de la imagen. Para cada uno de ello mostraremos dos ejemplos, en ambos la imagen que será alineada es un cuadrado rojo con una línea que marca su centro. En el primero la imagen irá seguida de tres líneas de texto y en el segundo irá precedida de una imagen el doble de alto que marcará los límites verticales de la línea.

align=top:

Alinea la parte superior de la imagen con la parte superior de la línea. Para determinar cual es el límite superior de la línea se tendrán en cuenta todos los elementos de esta (ya sean texto, imágenes u otros), tanto los anteriores como los posteriores a la imagen que estamos insertando. En la figura 5.12 podemos ver dos ejemplos de align=top. El primer caso es sencillo de entender, pero el segundo requiere alguna explicación. La primera imagen se alinea (por defecto) con su parte inferior a la misma altura que la base del texto, después nuestro cuadrado rojo, alinea su parte superior con la parte superior de dicha imagen.

Figura 5.12. Ejemplos de align=top. En el primer caso la parte superior de la imagen coincide con la del texto y en el segundo con la parte superior de la imagen azul.

align=middle:

Alinea el centro (vertical) de la imagen con el centro de la línea. Si la línea esta compuesta únicamente por texto el se tomará la base de éste como centro de la línea. Si hay más elementos el navegador calcula cual es el centro de la línea en función de todos ellos. En la figura 5.13 podemos ver unos ejemplos.

Figura 5.13. Ejemplos de align=middle. En el primer caso el centro de la imagen coincide con la base del texto, en el segundo intenta centrarse con la imagen azul.

align=bottom:

Alinea la parte inferior de la imagen con la parte inferior de la línea de texto. En este caso no se tendrán en cuenta otros elementos a parte del texto para realizar el alineamiento. De nuevo podemos ver ejemplos de este alineamiento en este caso en la figura 5.14.

Figura 5.14. Ejemplos de align=bottom. En ambos casos la parte inferior de la imagen se alinea con la base del texto, aunque la imagen azul baje por debajo.

NOTA: Es posible que nos encontremos alguna página en la que haya una imagen con el atributo align=center. Este nuevo valor (center) sólo funciona con Internet Explorer y tiene el mismo significado quealign=middle y además su nombre puede confundirnos y creer que la imagen se mostrará como si estuviese encerrada por la etiqueta <center>..</denter>. Por estas dos razones recomendamos el uso dealign=middle en su lugar.

Estos tres son los únicos tipos de alineamiento que incluía el lenguaje HTML en sus orígenes. Sin embargo, aunque son útiles, no nos permiten controlar la disposición de las imágenes tanto como querríamos. Por ejemplo, todavía no podemos insertar una imagen y que el texto la bordee tal y como veíamos en la figura 5.11. De hecho en todos los valores anteriores sólo la primera línea de texto introducida después de la imagen se situaba a la derecha de esta, aunque esta línea estuviese en la parte superior de la imagen como ocurría en el primer caso de la figura 5.12. La segunda línea y las siguientes serían mostradas debajo de la imagen.

Fuente: Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1