24 Responses for "Centrar imagenes en CSS"

1. Gerald October 31st, 2005 at 2:46 pm

   Bueno mi estimado Almadark, Css si sabe centrar.
   El codigo que yo uso es el siguiente

   img {
   margin-left: auto;
   margin-right:auto;
   display: block;
   }

2. ser humano October 31st, 2005 at 3:27 pm

   si te das cuenta, mi atolondrado Geraldo, ese código ke has puesto es exactamente el mismo ke puse en mi artículo, código ke no funciona en Internet explorer…

3. Carla October 31st, 2005 at 7:07 pm

   Hasta ahora lo único que he hecho es usar aunque ya es anacrónico pero funciona… lo que recomiendas está bueno, pero sí, falta algo para poder centrar las cosas como debe ser.

4. ser humano October 31st, 2005 at 7:51 pm

   Así es, se necesita una propiedad ke funcione como el casi desechado <center></center>

5. Gerald October 31st, 2005 at 9:33 pm

   atolondrado, da.
   (Del part. de atolondrar).
   1. adj. Que procede sin reflexión

   La solucion que implemente para centrar fue algo asi:
   img {
   margin: 10px,0,0,10px;
   text-align: center;
   display: block;
   }

   tu solucion que realizas con los divs es correcta, pero tenias razon ya que el codigo que puse solo funciona en Firefox y Opera.
   espero que el 2do codigo que te muestro te funke

6. ordi January 3rd, 2006 at 5:49 pm

   Hola,

   si combinamos ambos códigos funciona en las ultimas versiones de ambos navegadores (lo de probar la compatibilidad con versiones anteriores lo dejo para otro)

   img.fotocen {

   text-align: center;
   display: block;
   margin: auto;
   margin-bottom: 10px;

   }

7. Elquetodolosabe February 9th, 2006 at 11:05 am

   img { hrtl-align: center nule block;
   }

8. elchecarloz March 6th, 2006 at 6:32 pm

   Hola!
   CSS si sabe centrar, pero tu no xD
   La idea, y el estandar CSS2, es que un elemento en linea, inline, interior o contenido, no se “centra”, o al centro, si no que un elemento bloque, block, exterior o contenedor, alinea su contenido… Así que:
   Colocas tu “img” dentro de un elemento “p”, y al “p” le das estilo “text-align: center;”
   Ahora para el caso de alinear toda la página, al “body” le das “text-align: center;” y a los elementos que estan contenidos en el “body” (“p”, “div”s, whatever) les das estilo: “margin: 0px auto;”
   y voila!
   Mira allí:
   http://www.bluerobot.com/web/css/center1.html
   Parece ser que en CSS3 habrá un atributo para centrar elementos bloques y no se tendrá que emplear el atributo un tanto “raro” “text-align” para centrar elementos que no son solo texto.
   Bueno,
   No tomes a mal todo esto.
   Saludos
   Nice blog

9. ser humano March 6th, 2006 at 6:57 pm

   Bueno, como verás en el post, esas soluciones (todas las expresadas en los comentarios) ya fueron explicadas, es decir el problema no es centrar, el problema es ke no hay una etiketa que permita hacerlo sin tener ke hacer un “div” (lo optimo (según yo) es ke así como hay un “float:left” hubiera un “float:center”).

   No me tomen a mal pero lo ke resumo de esto es ke hay gente ke se apasiona tanto con una idea ke ni sikiera se toma la molestia de leer bien el post antes de lanzar una “solución”.

10. cold-zone July 14th, 2006 at 12:27 am

    hola a todos
    mi solucion sin incomodar a nadie seria poner una leyenda en las paginas
    que diga que esa pagina no se ve bien en determinados navegadores
    esto es solo para que los mismos desarrolladores de los navegadores se acostumbren a seguir mejor el estandar de css pues en varios casos es el mismo problema con el explorer
    no engo nada en contra de este navegador ni e su compañia y mucho menos en contr de este foro pero de alguna forma nosors tambien tenemos algo de culpa por no dar a conocer el problema a los desarrolladores de los navegadores

    mi solucion seria crear un div y poner la imagen como fondo en este div o usar tablas

11. yosiquelosetodo March 7th, 2007 at 2:15 pm

    pero que os pasa?
    Para centrar una imagen en css solo tenemos que sujetar bien la imagen y mover el monitor.

12. nocrox March 9th, 2007 at 7:43 pm

    espero y el comentario anterior sea un sarcasmo

13. Pagana June 4th, 2007 at 9:10 am

    GRaaaaaaaaaciassssssssssss!!! hace más de un año que tenía la imagen de cabecera de mi blog, apoyada a la izquierda!

    Mil gracias!

    Todavía me queda un prblema que no he podido solucionar con una imagen que tengo en la barra lateral, pero esa no es tan grave.

    Mil Gracias!

14. laquemascolabora August 13th, 2007 at 1:49 pm

    no discutir diminutos internautas que nadie sabe donde están… pequeños seres bondadosos… que estan viviendo con nosotrooooosssssssssssss.

    PERO SEGURO QUE NO LOS VERAS!!!!!!!!!!!!!!!!

    Un poquito de ayuda porfavor!!!!!!!

15. Yioryios August 24th, 2007 at 10:10 pm

    interesting

16. Arias March 4th, 2008 at 2:09 pm

    El display: block; con el margin: auto; si que funciona en IE a partir de la versión 6 del mismo, pero solo cuando especificas que estás aplicando los estandares, es decir, cuando le estas especificando un doctype. Si no especificas doctype o este no es la primera linea IE6 se pasa a comportar como IE5.5 y empieza a hacer y calcular mal muchas cosas.

    Supuestamente HTML es estructura y CSS presentación, con lo que es normal que no exista una etiqueta para centrar…

17. Covi December 5th, 2008 at 1:08 pm

    Escuchad a Arias, tenéis muuuucho que aprender

18. manu August 19th, 2009 at 8:04 am

    Hola, he coincidido con vuestro tema en esta web y me he preguntado a pesar de la dificultad de las imagenes en las hojas CSS, podrría centrar y en un momento pude ennumerar algunas, claro está que la mayoría envolviendo en una capa “Div”.
    Ejemplos;

    img{ display:block;margin:auto; }
    #uno{text-align:center}
    #dos{background-position:center}
    #tres{position:relative; margin:auto}
    #cuatro{margin:0 auto 0 auto}
    #cinco{ padding:0 auto 0 auto}

    Si quereis comprobarlo, solo abre un archivo bloc de notas de windows, copias este codigo, cierras y renombras el archivo bloc de notas como .html.
    Lo miras y si te sirve, mejor que mejor.
    manu

19. manu August 19th, 2009 at 8:06 am

    Hola en el post anterior puse el html, pero no ha salido.
    Imagino que hay limite de texto…
    http://www.inetrnavegacion.com

20. CSS: Centrar una imagen, o dos que estén juntas, o tres… « Mag Meld September 3rd, 2009 at 7:48 pm

    [...] no lo creía, css tenia que tener alguna manera para solucionar esto. Hasta que llegué a Centrar imagenes en CSS – iDioteca donde uno de los comentarios propone colocar las imágenes entre etiquetas <p></p> y [...]

21. cristian November 18th, 2009 at 9:26 am

    centrar o alinear: pues yo utilizo esto…..

    en ASP

    en CSS
    #portfolio
    {
    display: block;
    float:right;
    padding:0 300px 0 0;

22. Victor Aranda November 19th, 2009 at 5:37 am

    Me ha funcionado perfecto con la opción dos. Creo que es muy elegante.
    Gracias.

23. leon March 2nd, 2010 at 11:53 am

    el problema es centrar dos o mas imagenes horizontalmente en iexplorer los demas navegadores lo permiten ejem:

    imagen1,imagen2,imagen3,

    li {text-align:center}

    resultado explorer

    imagen1

    imagen2

    imagen3

    en los demas navegadores correcto

    imagen1,imagen2,imagen3

24. Anonymous August 8th, 2010 at 8:22 pm

    hola