Foros del Web » Creando para Internet » CSS »

Centrar imagen en vertical

Estas en el tema de Centrar imagen en vertical en el foro de CSS en Foros del Web. Hola, quiero centrar una imagen verticalmente dentro de una capa, esta colocado de la siguiente manera: En rojo está la capa contenedora ( margin: 20px ...
  #1 (permalink)  
Antiguo 23/11/2007, 03:47
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 13 años
Puntos: 9
Centrar imagen en vertical

Hola, quiero centrar una imagen verticalmente dentro de una capa, esta colocado de la siguiente manera:



En rojo está la capa contenedora (margin: 20px auto; color: #FFFFFF; vertical-align: middle;), Lo verde es la imagen (float: left; margin:auto;) y en azul un párrafo de texto (text-align: left; float: left; display: inline; width: 118px; margin: 0px 0px 0px 12px;). Abajo de los dos float hay un seprador con clear:both.

Quiero que la imagen aparezca centrada verticalmente (ahora está arriba de la capa), pero no lo consigo ni con margin: auto, ni con vertical-align: middle en el contenedor. He probado a poner una capa que contenga a la imagen con height: 100% y vertical-align: middle, pero me ignora, no le pone alto 100%

La imagen es dinámica, así que en principio se desconoce la ruta y el tamaño

Más ideas? Gracias
  #2 (permalink)  
Antiguo 23/11/2007, 09:45
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 13 años
Puntos: 9
Re: Centrar imagen en vertical

Otro problema similar que me he encontrado, creo que la solución sería la misma para los dos...

Tengo dos capas, una junto a otra, pueden tener una altura cualquiera, y necesito estirar una hasta la altura de la otra.



En la imagen lo muestro con dos capas (verde y azul, en verde con lineas discontinuas está lo que pretendo conseguir), ambas tienen float, porque si no pongo float ignora en ancho que le ponga, no se por qué. QUiero que tengan la misma altura para poner la barra de separación y el borde inferior que están en negro. Si no pongo float me pone en las dos capas (verde y azul) ancho 100%, aunque he puesto display: inline, no puedo ponerlas position:absolute porque la capa contenedora (roja) está también float.

Creo que ha llegado el momento de usar tablas, si alguien propone algo mejor ...

Gracias
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:15.