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 serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

21 comentarios:

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

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

    ResponderBorrar
  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!

    ResponderBorrar
  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;

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

    Saludos!

    ResponderBorrar
  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!

    ResponderBorrar
  7. 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

    ResponderBorrar
  8. Hola Muy bueno el post me ah ayudado mucho jejeje

    Gracias!!!

    ResponderBorrar
  9. Muchas gracias , me solucinaste un quebradero de cabeza

    ResponderBorrar
  10. como se puede alinear una imagen a la izquierda entro de un botón sin que el texto quede desplazado?

    Antes (con el texto en su sitio): https://gyazo.com/7c941297cb64797d2649447418890bb9

    Después: (el texto se desplaza) https://gyazo.com/9adc9aa3b11b0282384c9aca3c87e321

    Codigo: (no deja poner html asi que pongo guiones en las etiquetas button, span y img)

    -button- class="btn btn-lg btn-primary btn-fb btn-block"
    - span- class="fb"- -img src="img/fb.png"width="50" height="40"- -/span-
    -span- Entra con Facebook-/span-
    -/button-

    CSS: lo que hace que se desplace es el float:left pero se mueve todo lo demás, como hago para que solo se alinea la imagen a la izquierda?

    .fb{
    padding:0px;
    margin:0px;
    float:left;
    }

    ResponderBorrar
    Respuestas
    1. span no es un elemento de bloque, sería mejor usar div.

      ¿Pero para un botón como este no sería mejor usar una imagen?

      line-height o padding-top te puede ayudar con el texto. Sobre la imagen deberías de jugar con las distancias de margin-right para alinearla sobre su posición.

      Por ejemplo

      <div id="cuerpo">

      <div id="img" >imagen</div>

      <div id="text"> Texto </div>

      </div>

      Sin obviar la configuración de float

      #cuerpo { /* aqui iría el ancho el alto */ width:; height:;}
      #img {
      background: url("imagen.jpg");
      width: valor px;
      height: valor px;
      /* así controlaría la separación del div que contiene la imagen */
      margin-left:valor px;
      }

      #text {
      width: valor px;
      height: valor px;
      /* aqui yo manejaría la separación del div con el texto */
      padding-top:valor;
      /* Si no quieres usar el padding, puedes usar line-height: valor + px, % o pt; */
      text-align: left;
      }

      Alinear al centro no es una cosa exacta con tantos elementos tienes que ir ajustando hasta que te quede centrado según tus deseo.

      Borrar
  11. Joder tio me solucionaste el problema! Capo, te la chupo maestro :D

    ResponderBorrar
  12. Buenas, muy buen aporte. quisiera que pudieras ayudar en una pagina he intentado con tus ejemplo pero no lo he podido realizar, quiero que las imágenes queden horizontalmente pero con un titulo arriba de la imagen y con su precio de la imagen se le agradecería una pronta respuesta.

    ResponderBorrar
  13. muchisimas gracias hermano. sigue así

    ResponderBorrar
  14. Buenas, mi problema lo tengo con texto metido en div. Cuando intento alinear uno a la derecha, otro al centro y el siguiente a la izquierda, se superponen. Parece que los márgenes entre ellos se anulan y solo quiero algo tan sencillo como una lista de citas y que se sitúen en el orden que mencioné.
    ayuda!!!

    ResponderBorrar
  15. Muchas gracias por tu post¡¡ Después de volverme loca buscando como alienar los botones de redes sociales en mi side bar (tengo otros en el top del blog) que no conseguía centrar por no encontrar donde modificar el HTML, lo he conseguido toquiteando tu CSS¡¡ Muy útil tu publicación Matius, me guardo tu blog¡¡ Feliz verano ;)

    ResponderBorrar
  16. Pero como puedo hacer una columna de imagenes y texto a un lado?

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

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.