Slider 1 Slider 2 Slider 3 Slider 4

Bienvenidos a mi página

POSICIONAR LAS IMAGENES EN TU WEB

POSICIONAMIENTO DE LAS IMAGENES.

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

Ahora alinearemos una imagen a la derecha justo como se muestra acontinuacion:

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


 

 <img style="float:right" src="http://imageshack.us/a/img209/1513/2lmnltt.gif"/>

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

Para centrar la imagen utilizamos en atributo "center" justo asi:

 

<center><img alt="" src="http://imageshack.us/a/img209/1513/2lmnltt.gif" /></center>

Vamos a aumentar la dificultad, para hacer una linea 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://imageshack.us/a/img209/1513/2lmnltt.gif" />
<img alt="" src="http://imageshack.us/a/img209/1513/2lmnltt.gif" />
<img alt="" src="http://imageshack.us/a/img209/1513/2lmnltt.gif" />
 

Ahora vamos a hacer una linea de imagenes pero con salto de linea hacia abajo como se muestra acontinuacion:




 

<img alt="" src="http://imageshack.us/a/img209/1513/2lmnltt.gif" /></br>
<img alt="" src="http://imageshack.us/a/img209/1513/2lmnltt.gif" /></br>
<img alt="" src="http://imageshack.us/a/img209/1513/2lmnltt.gif" />

Por ultimo vamos a colocar una imagen a la derecha y otra a la izquierda sin salto de linea como se muestra acontinuacion:


 

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

Esto es muy util para poder posicionar una imagen donde nosotros queramos, no solo podemos aplicar esto con imagenes si no tan bien podemos aplicarlo en texto, enlaces, tablas y otros elementos.

Template by Clairvo Yance
Copyright © 2012 Solamente codigos html by bcn and cositaspatuweb.
javascript:;