Opciones

Search:

Home

Warning

function.reset

/home/irvmail/ignside.net/man/includes/header.php

Warning

/home/irvmail/ignside.net/man/includes/header.php

RSS 2.0

Actualizado el 14-01-2007
versión para imprimir

Imagenes (2)

insistimos en la alineación de imágenes y texto

Ya hemos visto que por defecto el navegador, a falta de otra instrucción, sitúa cualquier imágen a la izquierda:

<img src="imagenes/Pic4.gif" width="168" height="180" alt="mi héroe">

mi héroe

Podríamos colocarla en el centro con un par de etiquetas <center></center> [en desuso !].
En su lugar acudimos a las CSS, aunque esto es ligeramente mas complicado que flotar la imagen a izquierda o derecha: las opciones pasan, bien por anidar la imagen dentro de un par de etiquetas formadoras de bloque y centrar su contenido con text-align:center
<img src="imagenes/Pic4.gif" width="168" height="180" alt="mi héroe">

mi héroe

o bien si queremos unicamente centrar la imagen sin incluir mas etiquetas, usamos las propiedades de estilo margin-left y margin-right con valor auto:
esto es:
<img style="left-margin:auto;right-margin:auto;" alt="mi héroe" src="imagenes/Pic4.gif" width="168" height="180" >

Finalmente, ya sabemos como pasar la imagen a la derecha flotandola con float:right:

<img src="imagenes/Pic4.gif" style="float:right" width="168" height="180" alt="mi héroe" />

mi héroe

rodeando imagen con texto

Veremos ahora ejemplos de alineación dentro de un párrafo.

<img src="imagenes/Pic4.gif"
style="float:left" width="168" height="180" 
alt="mi héroe" />

blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla mi héroe blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla

Controlando el espacio entre imagen-texto

para ello usamos los atributos hspace y vspace [En desuso !!!!]

En su lugar indicamos que queremos espacio alrededor del elemento, con la propiedad de estilo padding, que podemos especificar para cada lado:

<img src="imagenes/Pic4.gif" 
style="float:left;padding:2 2 0 2em;"
width="168" height="180" alt="mi héroe" />

bordes en la imagen

border [En desuso ]nos permitía colocar un borde, especificando la anchura (o eliminarlo con valor 0). Como ya vimos en páginas anteriores, el borde se añade automaticamente si la imagen está dentro de un enlace; en ese caso podemos quitar el borde asignandole valor 0.

La forma recomendada actualmente es, como no, con estilos, usando la propiedad border. Pongamos un borde azul de 3 px a nuestra imágen:

<img height="180" alt="mi héroe" src="imagenes/Pic4.gif" width="168" 
style="border:3px solid blue;">

Para quitar el borde a una imagen dentro de un enlace, sería style="border:none"

la orden clear=

Se puede añadir la propiedad de estilo clear="" a la etiqueta para detener el flujo de texto en el punto que se indique, continuando en el siguiente punto vacío despues del objeto:

 especifica que el texto se reanuda en el próximo margen izquierdo vacío.

 especifica que el texto se reanuda en el próximo margen derecho vacío.

 especifica que el texto se reanuda en el punto donde ambos margenes derecho e izquierdo esten vacios.

blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla mi héroe blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla 
El texto salta al siguiente margen derecho libre blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla