Las imagenes pueden añadirse a tu website en diferentes formas. Las imagenes pueden alinearse y estar flotantes para permitir que esten posicionadas en un lugar especifico de la pagina. Dependiendo de como deseas mostar la imagen deberas usar una de las propiedades CSS align o float.
Imagenes alineadas: no permiten ajustar el texto al rededor de ellas, solo puedes colocarlas a las izquierda, derecha o al centro con el texto antes o despues de la imagen. Alinear la imagen deja un espacio en blanco al texto siguiente, puedes ver el espacio en blanco si vas a la seccion de la imagen alineada.
Imagenes flotantes: permitirá que el texto se ajuste al rededor de la imagen como si fuera un libro o un periodico. las imagenes flotantes aparecen horizontalmente en su sitio. Esto es bueno cuando queremos crear visualizaciones como en una galeria.
En la siguiente seccion veremos como alinear y flotar imagenes:
Alineamiento a la izquierda, derecha o centro
Las imagenes pueden ser alinieadas a la izquierda, derecha o centro usando el tag div y CSS en linea. El texto no se ajustará al rededor de la imagen, ellas estarán simplemente alineadas. El siguiente ejemplo explica como alinear una imagen usando CSS.
Alineación a la izquierda
<div style="text-align: left"><img src="/support/image/your-image.png" width="100" /></div>
Alineación al centro
<div style="text-align: center"><img src="/support/image/your-image.png" width="100" /></div>
Alineación a la derecha
<div style="text-align: right"><img src="/support/image/your-image.png" width="100" /></div>
Flotar imagenes usando CSS
Flotar las imagenes permite alinear la imagen horizontalmente con otras imagenes y permite ajustar el texto al rededor de la imagen. Los siguientes ejemplos explican como alinear las imagenes horizontalmente y flotar la imagen al rededor del texto.
Flotar la imagen a la izquierda para ajustar el texto
<img style="float: left; margin: 0px 15px 15px 0px;" src="/support/image/your-image.png" width="100" />
Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci. Vivamus at dolor a nibh aliquet luctus. Duis imperdiet mi id lorem pellentesque tempus. Ut quis felis posuere tellus feugiat ultrices. Praesent id tortor non tellus viverra placerat. Vivamus euismod nisi a leo interdum molestie ornare tellus consectetur. Nullam cursus varius tellus, id laoreet magna hendrerit at. Nulla sit amet purus at nunc blandit ultricies eu a urna. Proin euismod porttitor neque id ultricies.
Importante! las imagenes flotantes se superponen entre si, si la propiedad float no se borra. Asegurese de poner el codigo de “clear” despues de cada seccion donde su imagen este flotando. a continuacion el codigo para borrar la propiedad float.
<br style="clear:both" />
Aqui un ejemplo:
<p><img style="float: left; margin: 0px 15px 15px 0px;" src="/support/image/your-image.png" width="100" /> Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci. <br style="clear: both;" /></p>
Flotando imagenes a la derecha para ajustar texto
<img style="float: right; margin: 0px 0px 15px 15px;" src="/support/image/your-image.png" width="100" />
Pellentesque mattis tincidunt porttitor. Praesent commodo quam at elit posuere sed tempor risus tincidunt. Maecenas condimentum iaculis ligula, sit amet scelerisque nibh aliquam in. Quisque ornare gravida est ut fermentum. Nam venenatis pretium enim, in laoreet nibh tristique sit amet. Nullam cursus varius tellus, id laoreet magna hendrerit at. Nulla sit amet purus at nunc blandit ultricies eu a urna. Proin euismod porttitor neque id ultricies.
Flotando imagenes a la izquierda horizontalmente
Usaremos el mismo codigo anterior. Las imagenes estan simplemente colocadas una despues de la otra para obtener que floten horizontalmente.
<img style="float: right; margin: 0px 0px 15px 15px;" src="/support/image/your-image.png" width="100" />
Flotar imagnenes en linea con otras es una via sencilla para crear galerias.
fuente: http://www.inmotionhosting.com/