La mate por un Yogur.net

La mate por un Yogur.net

Alinear imágenes mediante CSS

27 de August, 2005

Alinear imágenes con CSS es algo que nos permite modificar a nuestro gusto las propiedades de éstas. Así podremos personalizar el espacio que haya entre imagen y texto y no será el navegador quien lo haga por nosotros. También podremos añadir nuevas características, como la opción de agregar un borde a nuestra imagen o diferentes colores, todo aquello que CSS nos permita.

El código CSS necesario es el siguiente:

img.border {
border: 1px solid #C6C6C6;
padding: 2px;
margin: 0;
}

img.border:hover {
background: #E3F5FE;
}

img.center {
display: block;
margin: auto;
}

img.alignright {
float: right;
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
float: left;
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

Después bastaría con añadir un class="tipo" a nuestras imágenes y sustituir tipo por border, center, alignright o alignleft.

Diseño Web | ¡Compártelo!

9 Comentarios

RSS TrackBack
  1. avatar

    Ana dice:

    Pues seguiré tu consejo (cuando me lo permita la perrería), que tengo las imágenes del blog un poco dejadas caer.

    Comentario — 27/8/2005

  2. avatar

    Federico dice:

    ¿Alguna razón para el display: inline? El bug del doble margen de explorer no cuenta.

    Comentario — 28/8/2005

  3. avatar

    Felipe dice:

    Me sirvió esto, gracias ;)

    Comentario — 14/1/2007

  4. avatar

    Name dice:

    Bueníííííísimo!!! ;)

    Comentario — 28/6/2007

  5. avatar

    FrantiC dice:

    Gracias, me sirvió de ayuda :)

    Comentario — 28/9/2007

  6. avatar

    Develoweb dice:

    Excelente articulo, ayudo a despejarme de ciertas dudas que tenia con respecto a la posicion de las imagenes.

    Saludos

    Comentario — 3/2/2008

  7. avatar

    Miguel Olave dice:

    grax fue muy útil y preciso. Lo aplique casi con copy paste.

    Comentario — 24/3/2008

  8. avatar

    Leonardo Parada | Blog » Blog Archive » Como hacer que el texto rodee una imagen dice:

    […] ultimo lo aprendi gracias a este post sobre como alinear imagenes mediante CSS en el blog de la mate por un yogur (si…es el nombre de un […]

    Pingback — 9/4/2008

  9. avatar

    david dice:

    Hola

    Y, como puedo hacer para que la imagen de fondo se quede bloqueada y no se repita con CSS????

    Muchas gracias,

    Comentario — 17/4/2008

Añade tu Comentario

Gracias a WordPress y Dreamhost
Bajo una licencia Creative Commons
Usa Firefox u Opera
Cerrar
E-mail It