Foros del Web » Creando para Internet » CSS »

Centrar imagen verticalmente

Estas en el tema de Centrar imagen verticalmente en el foro de CSS en Foros del Web. Hola a [email protected], he mirado los post de la web sobre el tema, pero las soluciones que dan a otros usuarios es para centrar una ...
  #1 (permalink)  
Antiguo 31/03/2010, 08:30
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Exclamación Centrar imagen verticalmente

Hola a [email protected], he mirado los post de la web sobre el tema, pero las soluciones que dan a otros usuarios es para centrar una sola imagen, modificando padding/margin o añadiendo otro div/tabla..., pero lo que necesito es centrar cualquier imagen en el div, porque se cargan unas cuantas y tienen diferentes tamaños.

El centrado horizontal lo tengo, pero el vertical me está costando...

Éste es el código que he utilizado:
Código CSS:
Ver original
  1. .contenedor {
  2.     width:195px;
  3.     height:314px;
  4.     float:right;
  5. }
  6.  
  7. .contenedor img {
  8.     display:block;
  9.     margin:auto;
  10. }
  #2 (permalink)  
Antiguo 31/03/2010, 10:55
Avatar de 2102325  
Fecha de Ingreso: octubre-2009
Ubicación: Santo Domingo RD
Mensajes: 75
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Centrar imagen verticalmente

Bueno, a ver si esto te ayuda, segun entiendo tienes un div contenedor de imagenes diferentes con diferentes tamaños, por lo menos es lo que dice tu codigo...

ahora bien, si las imagenes son de diferentes dimensiones las que se cargan en div creo que no tienes porque darle dimensiones a tu div contenedor a menos que que la imagen mayor que cargues tiene esas dimensiones que estas indicando.... Mi idea es la siguiente

.contenedor {
width:195px;
height:314px;
float:right;
position:absolute;
}

.contenedor img {
display:block;
position: relative; //para que sea relativa al elemento contenedor
top:50%; // para que tome el 50% del height de su contenedor
left:50%; // para que tambien tome el 50% de su width
}

Prueba con esto me parece que deve resolver tu problema...

Saludos desde RD
  #3 (permalink)  
Antiguo 31/03/2010, 11:12
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Centrar imagen verticalmente

No funciona :s

El div tiene un tamaño porque la página tiene un tamaño fijo, lo que cambia es sólo el contenido, pero las imágenes, aunque prácticamente tienen el mismo ancho, no tienen la misma altura.

Al div contenedor no puedo añadirle la propiedad

Código CSS:
Ver original
  1. position:absolute;

porque se descuadra del diseño, la capa está colocada a la derecha, y con esto se va a la izquierda.
  #4 (permalink)  
Antiguo 31/03/2010, 11:46
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Centrar imagen verticalmente

probá esto:

Código CSS:
Ver original
  1. .contenedor {
  2.     width:195px;
  3.     height:314px;
  4.     float:right;
  5.     text-align:center;
  6.     vertical-align:middle;
  7. }
  8.  
  9. .contenedor img {
  10.     display:block;
  11.     margin:auto;
  12. }

Espero funcione
  #5 (permalink)  
Antiguo 31/03/2010, 12:43
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Centrar imagen verticalmente

tampoco funciona
  #6 (permalink)  
Antiguo 31/03/2010, 17:41
 
Fecha de Ingreso: junio-2009
Ubicación: Madrid
Mensajes: 402
Antigüedad: 8 años, 5 meses
Puntos: 20
Respuesta: Centrar imagen verticalmente

Código:
.contenedor {
    width:195px;
    height:314px;
    float:right;
}
 
.contenedor img {
    position: absolute;
    top: 50%;
    height: 100%;
    margin:auto;
}
Pero deberia de bastar con poner vertical-align:middle;

Eso deberia de ir bien, yo
  #7 (permalink)  
Antiguo 31/03/2010, 18:11
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Centrar imagen verticalmente

Con el top y el height la imagen se ve descomunal ocupa la pantalla entera del navegador
  #8 (permalink)  
Antiguo 02/04/2010, 06:02
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Centrar imagen verticalmente

alguien tiene alguna idea?
  #9 (permalink)  
Antiguo 02/04/2010, 11:37
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: Centrar imagen verticalmente

Solo se me ocurre esta solucion...
http://www.araudi.net/ejemplos/centr...lay_table.html

pero no funciona en IE... amenos que uses tablas de verda... (<table>) :S
  #10 (permalink)  
Antiguo 02/04/2010, 17:38
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Centrar imagen verticalmente

la única pega es que en explorer se pega al lateral izquierdo, pero se centra, lo he solucionado añadiendo padding con un hack, para que sólo le lea explorer, y además valida

Código CSS:
Ver original
  1. padding-left:10px\9;

muchas gracias!

Etiquetas: Ninguno
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 09:52.