miércoles, 30 de abril de 2008

Alinear imágenes con CSS: a Derecha, Centro e Izquierda

alinear a la izquierdaEsto va para crear una base de recursos sobre HTML y CSS de mi artículo principal, sobre como crear un blog y es la continuación obligatoria al artículo sobre como centrar imágenes con CSS.

En este caso a la derecha e izquierda usando uno de los más importantes atributos de CSS para el diseño con DIV, que luego entraremos a detalle en ello.

Este tutorial no trata del diseño con imágenes con CSS, lo veremos próximamente, sino de objetos metidos dentro del texto.

Como se dijo anteriormente, CSS no tiene ningún atributo especial para centrar imágenes y es todo un dolor de cabeza para algunos "descubrir la manera", aquí cabe cuestionar lo que les costaba hacer un atributo que fuera especial para centrar objetos cuando en el caso de los laterales se puede alinear a derecha e izquierda asignando un atributo dentro de la tag de IMG, por que nos valdremos de un simple truco para centrar una imagen.

Recordar que a diferencia del texto, donde no es necesario alinear a la izquierda, en el caso de las imágenes incluso es recomendable hacerlo.

Para alinear una imagen simplemente usamos el atributo CSS Float, en el cual podremos usar Left y Right para establecer una alineación a la derecha y a la izquierda.

Usando flotar (Izquierda y derecha)
Pueden ver en otros artículos la forma en que se usan las clases para vincular esta propiedad desde una archivo CSS para no repetir los pasos:

Para la izquierda agregamos float: left;

<img style="float:left;" src="http://tusitio/imagen.jpg" alt="descripción" />

Para la derecha agregamos float: right;

<img style="float:right;" src="http://tusitio/imagen.jpg" alt="descripción" />

Resultado Izquierda: (Lo he encerrado en un DIV con la misma altura que la imagen)

alinear a la izquierda

Resultado Derecha: (Lo he encerrado en un DIV con la misma altura que la imagen)
alinear a la derecha

Esto es muy útil para mezclar texto con imágenes o con otras imágenes sin maquetar.

Si necesitamos más espacio entre las imágenes y el texto usamos la propiedad CSS, margin para establecer dicha separación.

Clear
El uso del atributo float, permite flotar los objetos, no importando cuantos sean, todos se alinearan en el espacio disponible, si se quiere controlar esto existe el parámetro clear.

Clear es importante pues evita que otros elementos flotantes compitan por una posicion si se alinean a la izquierda o la derecha.

por ejemplo para:
<img src="imagen 1.jpg" style="float:left;clear:left;" />
<img src="imagen 2.jpg" style="float:left;" />
Ambas imágenes estarán flotadas a la izquierda, pero la que tiene el parámetro clear:left evitara que la segunda imagen se alineé primero a la izquierda, lo mismo pasaría con clear:right. Por último clear:both evitaría que ningún objeto con float se alineé con un objeto que posea esta propiedad a la vez que con float, por ejemplo "float:left;clear:both;

Alinear al centro
alinear a la derecha

Yo nunca dije que no se pudiera alinear una etiqueta img al centro, aunque la realidad no existe un parámetro que lo haga específicamente, hacemos lo mismo que con un DIV, usamos margin:0 auto; agregando el parámetro display:block; para que se comporte como un DIV:
<img style="display:block;margin:0 auto 0 auto;" src="http://tusitio/imagen.jpg" alt="descripción" />
Por supuesto que esta imagen no flotará y no se llevará muy bien con float, en la imagen de abajo ambas imágenes con float son empujadas hacia abajo:

alinear a la derechaalinear a la izquierdaalinear a la derecha

Alinear al centro con margin en una div con tamaño definido
Si queremos centrar una imagen en un div con un ancho (width) conocido será sencillo usando margin con sus variantes margin-left y margin-right junto con float, por ejemplo:

alinear a la izquierdaalinear a la derechaalinear a la derecha

Tendríamos que evaluar el tamaño de las imágenes y sus separaciones, en este caso, el DIV mide 500px y las imágenes 100px, por lo que hay una separación de 100 px entre ellas, así pues asignaremos a las tres float:left, aunque también podemos dar a la última float:right para ahorrarnos parámetros.

Algunos ejemplos de como se resolveria el mismo caso

1.-margin-left y con la ultima imágen flotada a la derecha sin margin-left:
<div style="width:500px; height:100px;">
<img src="imagen-1.jpg" style="float:left;"/> 
<img src="imagen-2.jpg" style="float:left;margin-left:100px;" />
<img src="imagen-3.jpg" style="float:right;" />
</div>
2.-float:left y margin-left
<div style="width:500px; height:100px;">
<img src="imagen-1.jpg" style="float:left;"/> 
<img src="imagen-2.jpg" style="float:left;margin-left:100px;" />
<img src="imagen-3.jpg" style="float:left;margin-left:100px;" />
</div>

3.-float:left y margin:righ, ultima imagen flotada a la derecha
<div style="width:500px; height:100px;">
<img src="imagen-1.jpg" style="float:left;margin-right:100px;"/> 
<img src="imagen-2.jpg" style="float:left;px;" />
<img src="imagen-3.jpg" style="float:right; />
</div>
4.-float:left y margin:right (la ultima no lleva porque son dos espacios de 100px)
<div style="width:500px; height:100px;">
<img src="imagen-1.jpg" style="float:left;margin-right:100px;"/> 
<img src="imagen-2.jpg" style="float:left;margin-right:100px;" />
<img src="imagen-3.jpg" style="float:left; />
</div>
5.-Sólo float left y con margin en la imagen del centro (los valores de margin van en orden top, left, bottom, right, el ultimo valor 100px no es necesario pornerlo si es el mismo que left);
<div style="width:500px; height:100px;">
<img src="imagen-1.jpg" style="float:left;"/> 
<img src="imagen-2.jpg" style="float:left;margin: 0 100px; 0" />
<img src="imagen-3.jpg" style="float:left; />
</div>

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

12 comentarios:

  1. gracias por el aporte, me ayudo bastante compreder la alineación en CSS. saludos.

    ResponderEliminar
  2. Pues que bien porque es una forma bastante buena de manejar el diseño por DIV.

    ResponderEliminar
  3. Esta genial! Pero tengo una duda... que CSS tengo que poner para que todas las imagenes que vaya poniendo, las vaya poniendo en horizontal ?

    Aqui pones left, y la imagen queda a la izquierda, pero si pones otra.. queda debajo, y lo que quiero es que salga al lado?
    Se puede hacer eso?

    Guardo a favoritos tu blog, me seria de muchisima ayuda! Gracias!

    ResponderEliminar
  4. Claro, solamente flota todas las imágenes a la izquierda y a la última le poner clear:right; para que de el salto de linea para otras imágenes que tengan float:left;

    ResponderEliminar
  5. Muchísimas gracias , me ha ayudado mucho a solucionar un problema que tenia con mi web.

    Saludos!

    ResponderEliminar
  6. Con esto resolví el alinear la caja de comentarios de Disqus en una de mis webs, esta mil veces mejor explicado que W3 School jajajaja. Muchas gracias!

    ResponderEliminar
  7. has puesto floar en vez de float

    ResponderEliminar
  8. Hola, muy bueno el post.
    ¿Cómo se realizaría colocar varias imágenes (en horizontal) y que estas se distribuyan dentro de un div de medida indefinida? o sea, un div al 100%, si agrando el navegador o lo disminuyo de adecuen al div?
    Atte. Andrés

    ResponderEliminar
  9. Hola Muy bueno el post me ah ayudado mucho jejeje

    Gracias!!!

    ResponderEliminar
  10. Muchas gracias , me solucinaste un quebradero de cabeza

    ResponderEliminar

La leyenda de Korra Libro 4 (2014) "Reunión" Reseña y critica

La leyenda de Korra Book 4Korra se reune con Mako y Asami... muy romántico encuentro. Mientras Bolin tiene que pararse en frente de sus enemigos para defender a los débiles y convertirse en el héroe del momento.

[Leer artículo...]

Guardianes de la galaxia (2014): Review y crítica

Guardianes de la galaxia (2014) reseña y criticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Los caballeros de Zodiaco: La leyenda del Santuario (2014): Reseña y crítica

Los caballeros de Zodiaco: La leyenda del Santuario (2014)Seiya y sus amigos para una aventura en 3D para convatir al malvado Santuario y traer la justicia de Atena.

[Leer artículo...]

Tortugas Ninja (2014): Reseña y crítica de la película

Las tortugas ninja 2014Nada bueno puede salir de Michael Bay, pero cuando te das cuenta que no es el mismo directo, que Bay produce, el resultado no dista demasiado.

[Leer artículo...]

  © Cgnauta | CGsign blog | Licencia de uso | Matius algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

eXTReMe Tracker

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com