Laura García escribió:
>
> Buenos días,
>
> Necesito saber cómo puedo hacer que un elemento (img, texto...) puede
> mantenerse centrado verticalmente dentro de una capa, la cual no puede llevar
> una altura fija porque su contenido es dinámico, y un vertical-align:middle no
> hace nada.
> Me explico un poco mejor:
> tengo una capa en la cual, a la izquierda flota una imagen, y a la derecha
> tengo una tabla tabulada la cual puede contener un número variable de filas.
> Según aumenta dicho número de filas, la capa exterior crece, y lo que quiero
> es que la imagen de la izquierda se mantenga siempre en la mitad de la altura
> de la capa.
>
No hay ninguna propiedad css que te permita centrar verticalmente un
elemento en bloque dentro de una capa, o la ventana del navegador, y si
estas acostumbrada a maquetar con tablas donde si se puede con facilidad, la
estas echando de menos, yo hace años que maqueto solo con css y sigo
echándola de menos en algunos casos, sobre todo cuando el alto del elemento
a centrar es variable, caso en el que no hay solución.
La propiedad vertical-align, solo funciona para elementos en línea, es decir
etiquetas como a span etc. pero no en etiquetas en bloque como div, img, p y
tampoco parece funcionar cuando cambias el display a inline, probablemente
por herencias.
Así que para el posicionamiento vertical centrado de cualquier elemento en
bloque, se usa un truco, que consiste en posicionar el elemento a 50% desde
arriba y restarle con el margen la mitad de su altura, todo trabajando con
posicionamiento absoluto. Lo malo de este truco es tener que asignar una
altura fija al elemento.
Selector
{
position: absolute;
height: 200px;
top: 50%;
margin-top: -100px
}
Saludos
Rafa
biosfera 4
diseño y desarrollo web
http://www.biosfera4.com
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
