Imágenes

En esta lección aprenderás a:

• crear imágenes flotantes con la propiedad float
• desactivar la flotación de una imagen con la propiedad clear
• centrar imágenes

La propiedad float

Las imágenes son elementos en línea, es decir, que se insertan como si fueran caracteres, formando parte del párrafo o del elemento de bloque en el que se insertan. La altura de la línea en la que está insertado el elemento aumenta lo necesario para poder alojar la imagen, como muestra el siguiente ejemplo, en el que la hoja de estilo no contiene ninguna propiedad relacionada con la imagen.

Si quieres que una imagen aparezca a la izquierda (o a la derecha) de un texto, es decir, que el texto fluya a lo largo de la imagen, utiliza la propiedad float. Esta propiedad sólo admite dos valores, left y right, que sitúan la imagen a la izquierda o a la derecha, como muestran los ejemplos siguientes.

Para que las imágenes salgan correctamente alineadas con el texto, la imagen debe insertarse al principio del texto, independientemente de la posición final que vaya a tener la imagen. Los siguientes ejemplos muestran las diferencias

Las dos imágenes están insertadas antes del texto: <p><img /><img />Texto</p>	GNU + Linux = GNU/Linux.
La imagen izquierda está situada antes del texto y la imagen derecha al final del texto: <p><img />Texto<img /></p>	GNU + Linux = GNU/Linux.
Las dos imágenes están insertadas al final del texto: <p>Texto<img /><img /></p>	GNU + Linux = GNU/Linux.

Si las dos imágenes están situadas antes del texto, el orden de inserción no es importante

Las dos imágenes están insertadas antes del texto: <p><img izquierda /><img derecha />Texto</p>	GNU + Linux = GNU/Linux.
Las dos imágenes están insertadas antes del texto: <p><img derecha /><img izquierda />Texto</p>	GNU + Linux = GNU/Linux.

Volver al índice

La propiedad clear

Al crear una imagen flotante, el navegador sitúa los elementos que se encuentran a continuación de la imagen a su lado, aunque no pertenezcan al mismo bloque, como muestra el siguiente ejemplo (en Amaya los párrafos no se montan, pero sí en Mozilla e Internet Explorer):

img { float: left; }

El logotipo de GNU debe "flotar" a la izquierda y el párrafo debe fluir a su derecha. El logotipo de Linux, Tux, debe "flotar" a la izquierda y el párrafo debe fluir a su derecha. Seguramente tanto la imagen como el párrafo están a la derecha del logotipo de GNU.

Para impedir que ocurra esto, es necesario que la flotación de la imagen se interrumpa. La propiedad clear hace que un elemento no tenga elementos flotantes a su lado. Los posibles valores de float son left, right y both, que harían que no hubiera elementos flotantes a la izquierda, a la derecha o en ninguno de los dos lados, respectivamente.

Puedes asignar la propiedad clear a cualquier elemento. En el ejemplo siguiente se ha asignado a una línea horizontal:

img { float: left; } hr { clear: both; }

El logotipo de GNU debe "flotar" a la izquierda y el párrafo debe fluir a su derecha. El logotipo de Linux, Tux, debe "flotar" a la izquierda y el párrafo debe fluir a su derecha. La línea intermedia impide que se monten sobre el párrafo anterior.

Volver al índice

Centrar una imagen

La propiedad float no permite centrar objetos. Para centrar una imagen, el elemento que contiene a la imagen tiene que tener su contenido centrado.

Por ejemplo, si la imagen está en un párrafo, puedes definir la clase "p.centrado" con el atributo text-align establecido con el valor center y después dar al párrafo que contiene la imagen la clase "centrado". Lógicamente, si añades texto al párrafo, el texto también se centrará.

Volver al índice