Posicionamiento de imagenes

Es muy importante siempre colocar una imagen o ilustracion en el contenido de una pagina de web, es decir algo descriptivo de lo que estamos hablando.

Y siempre hay ocaciones en las que queremos talvez que una imagen este alineada a la izquiera, derecha o simplemente centrada, y de eso hablaremos hoy de controlar el posicionamiento de las imagenes. Y para eso vamos a utilizar varios atributos que nos ayudara. vamos a empezar...

Al poner una imagen por defecto siempre se va a colocar a la izquierda justo como esta:



Pero uno suele aburrirse de siempre ver las imagenes alineadas a la izquierda...
Por eso que les parece si alineamos una imagen a la derecha justo como se muestra acontinuacion:










y bien para alinear la imagen a la derecha pusimos un "float:rigth" en la etiqueta style de la imagen justo asi:

<img style="float:right" src="http://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif"/>

Y haora vamos a centrar la imagen, hay varias forman de centrar una imagen pero segun yo la mejor es encerrar la imagen con el atributo "<center>"
 

Como ya lo habia mencionada para centrar la imagen utilizamos en atributo "center" justo asi:

<center><img alt="" src="http://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" /></center>

Y bueno vamos a aumentar la dificultad, para hacer una ilera de imagenes sin salto de linea como se muestra a continuacion:

Para hacer una linea de imagenes justo como la acabamos de ver no hay que hacer gran cosa, ya que las imagenes por defecto se van alineando a la derecha en el espacio determinado donde estan... una por una sin salto de linea, para esto seria algo asi:

<img alt="" src="http://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" />
<img alt="" src="http://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" />
<img alt="" src="http://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" />

Haora vamos a hacer una linea de imagenes pero con salto de linea como se muestra acontinuacion:




 

Para hacer esa linea con salto de linea vamos a utilizar el atributo "br" en las imagenes justo asi:

<img alt="" src="http://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" /></br>
<img alt="" src="http://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" /></br>
<img alt="" src="http://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" />

Y por ultimo vamos a poner una imagen de lado derecho y otra del lado izquierdo sin salto de linea como se muestra acontinuacion:

Y bueno para esto usamos el atributo span con ciertas caracteristicas justo asi:

<div><span style="float:right"><img alt="" src="URL DE TU IMAGEN DERECHA" /></span><img alt="" src="URL DE TU IMAGEN IZQUIERDA" /></div>

Sin duda un articulo muy util para poder posicionar una imagen en donde querramos, no solo podemos aplicar esto con imagenes sino tambien podemos aplicarlo en texto, enlaces, tablas y mas elementos.