Foros del Web » Creando para Internet » CSS »

Como centrar una imagen verticalmente en un div

Estas en el tema de Como centrar una imagen verticalmente en un div en el foro de CSS en Foros del Web. Buenas noches Tengo el siguiente inconveniente. Debo colocar una imagen dentro de un div. La imagen debe quedar centrada tanto vertical como horizontal, pero unicamente ...
  #1 (permalink)  
Antiguo 13/07/2011, 22:03
 
Fecha de Ingreso: noviembre-2010
Mensajes: 204
Antigüedad: 6 años, 2 meses
Puntos: 1
Pregunta Como centrar una imagen verticalmente en un div

Buenas noches

Tengo el siguiente inconveniente. Debo colocar una imagen dentro de un div. La imagen debe quedar centrada tanto vertical como horizontal, pero unicamente logro que quede centrada horizontalmente.

Nota: la imagen que va en div, la cambio cada semana y todas son de tamaño diferente.

El codigo que estoy utilizando es el siguiente:


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


<div class="cuadro">

<img class="img1" src="imagen.jpg">

</div>

Mil gracias por su colaboracion
  #2 (permalink)  
Antiguo 14/07/2011, 03:04
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 8 años, 10 meses
Puntos: 252
Respuesta: Como centrar una imagen verticalmente en un div

No es nada sencillo lo que propones, sobre todo por la pega de que cambias la imagen y tiene tamaños diferentes. En CSS2 no se puede centrar verticalemente (si, es así de duro). Lo que hay es muchos trucos.

Si sabes el tamaño de la imagen lo más normal es centrarlo usando lo que se propone aquí. Otro truco es usar la propiedad vertical-align que tienen los img, cuyo cometido es centrar verticalemente el texto que rodea a una imagen, puedes ver la idea aquí.

Espero que alguno de los enlaces te sirva, creo que la solución por la que yo tiraría sería la primera, pero añadiría PHP para detectar el tamaño de la imagen y ajustar los valores.

Un saludo.

Etiquetas: tamaño, verticalmente
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 22:18.