Centrar imagen dentro de un div

dmm84 · #1 (**permalink**) 10/05/2011, 06:36

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<style type="text/css">
#alignfoto {
    width:280px;
    height:280px;
    background-color:#000;
    text-align:center;
}
</style>
<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>

IsaBelM · #2 (**permalink**) 10/05/2011, 08:09

prueba con

Cita:

position; relative;
top: 40px;
left: 40px;

dmm84 · #3 (**permalink**) 10/05/2011, 08:13

pero lo que me gustaria es que fuese con cualquier foto de cualquier tamaño (siempre por debajo de 280*280)

IsaBelM · #4 (**permalink**) 10/05/2011, 11:22

entonces se complica

Cita:

dmm84 · #5 (**permalink**) 10/05/2011, 11:43

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)

IsaBelM · #6 (**permalink**) 10/05/2011, 12:06

Cita:

Iniciado por dmm84

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

dmm84 · #7 (**permalink**) 10/05/2011, 13:02

ok, es que lo estaba viendo con el dreamweaver y no salia, ahora lo he subido a un servidor y si funciona. fallo tonto

angelfcm · #8 (**permalink**) 10/05/2011, 13:20

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

Código HTML:

Ver original<html>
<head>
<title>Centrado</title>
<style type="text/css">
#alignfoto {
    width:280px;
    height:280px;
    background-color:#000;
    text-align:center;
}
#alignfoto td {
 vertical-align:middle;
}
</style>
</head>
<body>
<table id="alignfoto">
 <tr><td><img src="gow.jpg" width="200" height="200" /></td></tr>
</table>
</body>
</html>

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

IsaBelM · #9 (**permalink**) 10/05/2011, 16:58

Cita:

Iniciado por angelfcm

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??

angelfcm · #10 (**permalink**) 11/05/2011, 14:17

Cita:

Iniciado por isabelm

en qué versión no funciona??

ie 8

ArturoGallegos · #11 (**permalink**) 11/05/2011, 15:17

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#alignfoto {
    width:280px;
    height:280px;
    background:#000 url(arch/fotos/dmm84/2011/Dimas.jpg) center center no-repeat;
    text-align:center;
}

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>

baccxus · #12 (**permalink**) 11/05/2011, 15:59

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#alignfoto {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
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

ArturoGallegos · #13 (**permalink**) 11/05/2011, 16:07

Cita:

Iniciado por baccxus

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

pero lo que me gustaria es que fuese con cualquier foto de cualquier tamaño

IsaBelM · #14 (**permalink**) 12/05/2011, 05:21

Cita:

Iniciado por Ag666

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

ArturoGallegos · #15 (**permalink**) 12/05/2011, 10:30

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.

IsaBelM · #16 (**permalink**) 12/05/2011, 14:02

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

ArturoGallegos · #17 (**permalink**) 12/05/2011, 14:20

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?

IsaBelM · #18 (**permalink**) 12/05/2011, 14:25

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