Re: [Ovillo] ALINEADO VERTICAL EN UNA CAPA
Hola, Laura, no sé si esto te servirá...
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml"; lang="es" xml:lang="es">
Imagen centrada verticalmente con una tabla variable
body {
margin: 0;
}
#contenedor {
position: relative;
}
#imagen {
display: block;
width: 20px; /* ancho y alto de la imagen */
height: 80px;
position: absolute;
top: 50%; /* centrado vertical */
margin-top: -40px; /* restamos la mitad de la altura de la imagen */
line-height: 80px; /* altura de la imagen */
}
#tabla {
margin-left: 20px; /* width de #imagen */
}
Una fila
Otra fila
Otra fila
Si no, tal vez podrías calcular el CSS también como un parámetro
variable a partir de la propia programación que genera la tabla
(suponiendo que las filas tienen una altura fija y controlada).
De todos modos, lo que dices del rowspan variable no es necesario,
siempre podrías anidar dos tablas (*AVISO:* no estoy recomendando
maquetarlo con tablas, sólo digo que *se podría hacer así*):
...
...
Un saludo,
Ramón.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ALINEADO VERTICAL EN UNA CAPA
Si se puede centrar elementos verticalmente.
Mirar lo siguiente:
http://cssglobe.com/articles/one_liners/line_height.html
No me parece una solución para tu problema porque tiene alto fijo :/
Pero como poder se puede.
2008/9/4 Laura García <[EMAIL PROTECTED]>
>
> Muchas gracias pero como bien dices, yo también hace tiempo que maqueto con
> css.
> Aún así, no me serviría una tabla ya que la imagen de la derecha iría en un
> td con un rowspan cuyo valor varía según el número de filas de la tabla. Es
> una tabla dinámica, unas veces habrá una fila y otras... x! y la única
> manera de controlar el valor del rowspan sería con javascript, cosa que no
> pretendo porque quiero usar, en la medida de lo posible, sólo css.
> Tampoco me sirve dar una altura fija a la capa contenedora (sobre la que
> iría todo centrado verticalmente), por el mismo motivo, porque la capa debe
> crecer según crezca lo de dentro, y al ser datos dinámicos, no se sabe lo
> que va a medir cada vez (insisto, con css.)
>
> De todos modos, muchas gracias
>
>
> > Date: Thu, 4 Sep 2008 11:48:50 +0200> From: [EMAIL PROTECTED]>
> To: ovillo@lists.ovillo.org> Subject: Re: [Ovillo] ALINEADO VERTICAL EN
> UNA CAPA> > 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
> Ovillo@lists.ovillo.org> Puedes modificar tus datos o desuscribirte en la
> siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
> _
> Prueba los prototipos de los últimos en MSN Motor
> http://motor.es.msn.com/
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
--
↓ Ignacio Ricci
www.ignacioricci.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ALINEADO VERTICAL EN UNA CAPA
Muchas gracias pero como bien dices, yo también hace tiempo que maqueto con css.
Aún así, no me serviría una tabla ya que la imagen de la derecha iría en un td
con un rowspan cuyo valor varía según el número de filas de la tabla. Es una
tabla dinámica, unas veces habrá una fila y otras... x! y la única manera de
controlar el valor del rowspan sería con javascript, cosa que no pretendo
porque quiero usar, en la medida de lo posible, sólo css.
Tampoco me sirve dar una altura fija a la capa contenedora (sobre la que iría
todo centrado verticalmente), por el mismo motivo, porque la capa debe crecer
según crezca lo de dentro, y al ser datos dinámicos, no se sabe lo que va a
medir cada vez (insisto, con css.)
De todos modos, muchas gracias
> Date: Thu, 4 Sep 2008 11:48:50 +0200> From: [EMAIL PROTECTED]> To:
> ovillo@lists.ovillo.org> Subject: Re: [Ovillo] ALINEADO VERTICAL EN UNA CAPA>
> > 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 Ovillo@lists.ovillo.org>
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
_
Prueba los prototipos de los últimos en MSN Motor
http://motor.es.msn.com/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ALINEADO VERTICAL EN UNA CAPA
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ALINEADO VERTICAL EN UNA CAPA
has probado en poner: margin:auto; El jue, 04-09-2008 a las 10:26 +0200, 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. > > Gracias > _ > ¿Sigue el calor? Consulta MSN El tiempo > http://eltiempo.es.msn.com/ > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo -- Nesta Guerrero Pancorbo Emergya Consultoría Avda. de la Innovación, 3 (Edif. Hércules), Mód 12-13 E41020 Sevilla Tfno: +34 954 51 75 77 Fax: +34 954 51 64 73 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ALINEADO VERTICAL EN UNA CAPA
Hola, Laura
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.
>
>
Si es una imagen decorativa (no necesita un texto alternativo y sólo
aporta decoración) puedes meterla como fondo de la capa contenedora:
div#contenedor-de-la-tabla{background:url('ruta/de/la/imagen') middle left;}
Sino, me temo que tendrás que recurrir a javascript.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ALINEADO VERTICAL EN UNA CAPA
creo que esto te puede funcionar: position:absolute; bottom:0; El jue, 04-09-2008 a las 10:26 +0200, 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. > > Gracias > _ > ¿Sigue el calor? Consulta MSN El tiempo > http://eltiempo.es.msn.com/ > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo -- Nesta Guerrero Pancorbo Emergya Consultoría Avda. de la Innovación, 3 (Edif. Hércules), Mód 12-13 E41020 Sevilla Tfno: +34 954 51 75 77 Fax: +34 954 51 64 73 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ALINEADO VERTICAL EN UNA CAPA
perdon, si está horizontal si es así, en vertical no, me puedes poner el codigo o el link de la página y lo miro y te lo digo? saludosss El jue, 04-09-2008 a las 10:26 +0200, 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. > > Gracias > _ > ¿Sigue el calor? Consulta MSN El tiempo > http://eltiempo.es.msn.com/ > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo -- Nesta Guerrero Pancorbo Emergya Consultoría Avda. de la Innovación, 3 (Edif. Hércules), Mód 12-13 E41020 Sevilla Tfno: +34 954 51 75 77 Fax: +34 954 51 64 73 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] ALINEADO VERTICAL EN UNA CAPA
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. Gracias _ ¿Sigue el calor? Consulta MSN El tiempo http://eltiempo.es.msn.com/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
