Foros del Web » Diseño web » CSS »

Centrar imagen dentro de un div

Estas en el tema de Centrar imagen dentro de un div en el foro de CSS en Foros del Web. Hola a todos, he estado buscando sobre esto pero no he encontrado como conseguir ese resultado de centrar la imagen tanto horizontal como verticalmente. Hasta ...
  #1 (permalink)  
Antiguo 10/05/2011, 06:36
Avatar de dmm84  
Fecha de Ingreso: marzo-2011
Mensajes: 164
Antigüedad: 3 años, 5 meses
Puntos: 13
Pregunta Centrar imagen dentro de un div

Hola a todos,

he estado buscando sobre esto pero no he encontrado como conseguir ese resultado de centrar la imagen tanto horizontal como verticalmente. Hasta ahora solo he conseguido centrarla horizontalmente, ¿como pordria centrarla de forma vertical? Uso este codigo:

Código HTML:
Ver original
  1. <style type="text/css">
  2. #alignfoto {
  3.     width:280px;
  4.     height:280px;
  5.     background-color:#000;
  6.     text-align:center;
  7. }
  8. <title>Centrado</title>
  9. </head>
  10. <div id="alignfoto">
  11.     <img src="arch/fotos/dmm84/2011/Dimas.jpg" width="200" height="200" />
  12. </div>
  13. </body>
  14. </html>
__________________
Mas vale un codigo que mil palabras
  #2 (permalink)  
Antiguo 10/05/2011, 08:09
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.439
Antigüedad: 6 años, 2 meses
Puntos: 884
Respuesta: Centrar imagen dentro de un div

prueba con
Cita:
position; relative;
top: 40px;
left: 40px;
  #3 (permalink)  
Antiguo 10/05/2011, 08:13
Avatar de dmm84  
Fecha de Ingreso: marzo-2011
Mensajes: 164
Antigüedad: 3 años, 5 meses
Puntos: 13
Respuesta: Centrar imagen dentro de un div

pero lo que me gustaria es que fuese con cualquier foto de cualquier tamaño (siempre por debajo de 280*280)
__________________
Mas vale un codigo que mil palabras
  #4 (permalink)  
Antiguo 10/05/2011, 11:22
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.439
Antigüedad: 6 años, 2 meses
Puntos: 884
Respuesta: Centrar imagen dentro de un div

entonces se complica
Cita:
<style type="text/css">
#cont {width:280px; height:280px; background-color:#000;}
#cont[id] {display: table; position: static;}

#alignfoto {text-align: center;}
#alignfoto[id] {display: table-cell; vertical-align: middle; position: static;}
</style>

<div id="cont">
<div id="alignfoto">
<img src="arch/fotos/dmm84/2011/Dimas.jpg" width="200" height="200" />
</div>
</div>
  #5 (permalink)  
Antiguo 10/05/2011, 11:43
Avatar de dmm84  
Fecha de Ingreso: marzo-2011
Mensajes: 164
Antigüedad: 3 años, 5 meses
Puntos: 13
Respuesta: Centrar imagen dentro de un div

me parece que no funciona pero de todas formas te estoy muy agradecido por las molestias que te has tomado y te doy algo de karma,
al final he llegado con mucho trabajo a una solucion en la que he mezclado css y php (aunque no se si sera lo correcto)
__________________
Mas vale un codigo que mil palabras
  #6 (permalink)  
Antiguo 10/05/2011, 12:06
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.439
Antigüedad: 6 años, 2 meses
Puntos: 884
Respuesta: Centrar imagen dentro de un div

Cita:
Iniciado por dmm84 Ver Mensaje
me parece que no funciona pero de todas formas te estoy muy agradecido por las molestias que te has tomado y te doy algo de karma,
al final he llegado con mucho trabajo a una solucion en la que he mezclado css y php (aunque no se si sera lo correcto)
funciona, funciona. dos tamaños distinto de imagen

  #7 (permalink)  
Antiguo 10/05/2011, 13:02
Avatar de dmm84  
Fecha de Ingreso: marzo-2011
Mensajes: 164
Antigüedad: 3 años, 5 meses
Puntos: 13
Respuesta: Centrar imagen dentro de un div

ok, es que lo estaba viendo con el dreamweaver y no salia, ahora lo he subido a un servidor y si funciona. fallo tonto
__________________
Mas vale un codigo que mil palabras
  #8 (permalink)  
Antiguo 10/05/2011, 13:20
(Desactivado)
 
Fecha de Ingreso: abril-2011
Mensajes: 153
Antigüedad: 3 años, 4 meses
Puntos: 236
Respuesta: Centrar imagen dentro de un div

O prueba de una forma más clásica:

Código HTML:
Ver original
  1. <title>Centrado</title>
  2. <style type="text/css">
  3. #alignfoto {
  4.     width:280px;
  5.     height:280px;
  6.     background-color:#000;
  7.     text-align:center;
  8. }
  9. #alignfoto td {
  10.  vertical-align:middle;
  11. }
  12. </head>
  13. <table id="alignfoto">
  14.  <tr><td><img src="gow.jpg" width="200" height="200" /></td></tr>
  15. </body>
  16. </html>

Por cierto el ejemplo de IsaBelM funcióna correctamente en Mozilla, pero en IE no(no he probado en otros).
Saludos.

Última edición por angelfcm; 10/05/2011 a las 13:48
  #9 (permalink)  
Antiguo 10/05/2011, 16:58
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.439
Antigüedad: 6 años, 2 meses
Puntos: 884
Respuesta: Centrar imagen dentro de un div

Cita:
Iniciado por angelfcm Ver Mensaje
Por cierto el ejemplo de IsaBelM funcióna correctamente en Mozilla, pero en IE no(no he probado en otros).
Saludos.
en qué versión no funciona??
  #10 (permalink)  
Antiguo 11/05/2011, 14:17
(Desactivado)
 
Fecha de Ingreso: abril-2011
Mensajes: 153
Antigüedad: 3 años, 4 meses
Puntos: 236
Respuesta: Centrar imagen dentro de un div

Cita:
Iniciado por isabelm Ver Mensaje
en qué versión no funciona??
ie 8
  #11 (permalink)  
Antiguo 11/05/2011, 15:17
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: Michoacán, México
Mensajes: 4.267
Antigüedad: 6 años, 6 meses
Puntos: 700
Respuesta: Centrar imagen dentro de un div

el compañero @angelfcm tiene razón IE7 e IE8 no interpretan correctamente el display:table y el utilizar una tabla para maquetar tendría que ser su ultima alternativa

yo en su lugar colocaría la imagen como fondo del div y lo posicionaría con CSS

Código CSS:
Ver original
  1. #alignfoto {
  2.     width:280px;
  3.     height:280px;
  4.     background:#000 url(arch/fotos/dmm84/2011/Dimas.jpg) center center no-repeat;
  5.     text-align:center;
  6. }

por otro lado @dmm84 los estilos se colocan dentro de las etiquetas <head> y </head> no antes ni después y mucho menos antes del <html>
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados ni ningún otro medio....
  #12 (permalink)  
Antiguo 11/05/2011, 15:59
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 855
Antigüedad: 9 años, 3 meses
Puntos: 10
Respuesta: Centrar imagen dentro de un div

Hola, también hay otra forma, alineando la imagen a un 50% vertical y un 50% horizontal y después restándose la mitad de la altura y la mitad del ancho de la imagen en la margen:
Código CSS:
Ver original
  1. #alignfoto {
  2. position: absolute;
  3. top: 50%;
  4. left: 50%;
  5. margin-top: -100px;
  6. margin-left: -100px;}

Código HTML:
<html>
<head>
<title>Centrado</title>
</head>
<body>
<div id="alignfoto">
* * <img src="arch/fotos/dmm84/2011/Dimas.jpg" width="200" height="200" />
</div>
</body>
</html> 
Saludos, funciona para todo, inclusive desde IE6
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 11/05/2011 a las 16:06
  #13 (permalink)  
Antiguo 11/05/2011, 16:07
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: Michoacán, México
Mensajes: 4.267
Antigüedad: 6 años, 6 meses
Puntos: 700
Respuesta: Centrar imagen dentro de un div

Cita:
Iniciado por baccxus Ver Mensaje
Hola, también hay otra forma, alineando la imagen a un 50% vertical y un 50% horizontal y después restándose la mitad de la altura y la mitad del ancho de la imagen en la margen:
también pensé en eso pero tome en consideración que no siempre sera del mismo tamaño con lo que ya no es viable esa opción



Cita:
Iniciado por dmm84 Ver Mensaje
pero lo que me gustaria es que fuese con cualquier foto de cualquier tamaño
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados ni ningún otro medio....
  #14 (permalink)  
Antiguo 12/05/2011, 05:21
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.439
Antigüedad: 6 años, 2 meses
Puntos: 884
Respuesta: Centrar imagen dentro de un div

Cita:
Iniciado por Ag666 Ver Mensaje
el compañero @angelfcm tiene razón IE7 e IE8 no interpretan correctamente el display:table y el utilizar una tabla para maquetar tendría que ser su ultima alternativa
funciona en ie8 y 9. como muestra un botón

el 7 me da exactamente igual
  #15 (permalink)  
Antiguo 12/05/2011, 10:30
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: Michoacán, México
Mensajes: 4.267
Antigüedad: 6 años, 6 meses
Puntos: 700
Respuesta: Centrar imagen dentro de un div

ok corrijo IE8 si lo acepta mmm algo me debió fallar ayer en la prueba que hice, sin embargo IE7 sigo he insisto en que no se ve correctamente y por el momento no me olvidaría de los usuarios de esta versión.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados ni ningún otro medio....
  #16 (permalink)  
Antiguo 12/05/2011, 14:02
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.439
Antigüedad: 6 años, 2 meses
Puntos: 884
Respuesta: Centrar imagen dentro de un div

poca vida le queda pero lo mas importante es en que países está esa cuota. si no fijamos, ie6 aún es usado bastante. pero prácticamente el 100% se concentra en china
  #17 (permalink)  
Antiguo 12/05/2011, 14:20
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: Michoacán, México
Mensajes: 4.267
Antigüedad: 6 años, 6 meses
Puntos: 700
Respuesta: Centrar imagen dentro de un div

interesante dato, veía mas viable dar soporte para IE7 que a IE6.... en pocas palabras podemos dejar de dar soporte a IE6 e IE7 sin problemas :) a como entiendo tu gráfica verdad?
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados ni ningún otro medio....
  #18 (permalink)  
Antiguo 12/05/2011, 14:25
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.439
Antigüedad: 6 años, 2 meses
Puntos: 884
Respuesta: Centrar imagen dentro de un div

así lo entiendo. mira esta otra estadística. es sobre la versión ie que usan los usuarios que visitan w3schools

Etiquetas: alinear, imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:01.
SEO by vBSEO 3.3.2