Hola gente de la lista,

Pues les cuento que después de mucho probar por fin encontramos una solución 
para el centrado vertical con alto fluido (no tan funcional como la tuya 
Almirante, pero bastante bien para lo que se buscaba).

Se a probado con IE7, IE6, FF2 y Gran Paradiso A2.  También se probo con poco 
texto y con mucho texto para ver el efecto de centrado.

Si alguien detecta un error en otro navegador favor avisar,

La solución es un hibrido de:

Stu Nichols (cssplay) y de Mikmoro (aka: Mikel / forosdelweb.com)

http://www.forosdelweb.com/showthread.php?p=1901588&posted=1#post1901588

Aquí dejo el código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Centrado vertical</title>
  <style type="text/css">
html, body { margin: 0pt; padding: 0pt;
height: 100%;
text-align: center;
}
#marco {
margin: auto;
display: table;
width: 750px;
height: 100%;
text-align: left;
}
#contenedor {
margin: auto;
display: table-cell;
vertical-align: middle;
position: relative;
height: 100%;
}
#vertical_ie { width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
#texto {
display:inline-block;
vertical-align:middle;
}
  </style>
</head>
<body>
<div id="marco">
<div id="contenedor"><span id="vertical_ie"></span><span
 id="texto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris pellentesque turpis vel risus. Nullam tincidunt lacus non urna.
Aliquam erat volutpat. Nam placerat, tortor et mollis facilisis, sapien
mauris dapibus mauris, sit amet pharetra tellus sem ut mi. Sed
tincidunt. Aenean tempus volutpat urna. Quisque at neque. Praesent
venenatis lacus ac massa. Sed accumsan luctus enim. Vestibulum massa
dui, scelerisque sed, dictum rhoncus, lacinia eget, tortor. Ut vel
turpis a elit pharetra pulvinar. Aliquam ut nisl ac nisi tristique
eleifend. Donec tristique ipsum id turpis.</p>
<p>Vivamus vitae risus in est dictum faucibus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Ut ut pede et ante faucibus commodo. Cras pulvinar turpis
quis risus. Mauris scelerisque. Cras lectus. Aliquam erat volutpat.
Praesent erat nunc, dictum vel, vehicula quis, rutrum sit amet, arcu.
Donec interdum. Quisque tristique, purus non pulvinar cursus, magna
lectus blandit orci, vitae tristique tellus tellus eget est. Quisque
sollicitudin convallis sem. Nunc justo.</p>
</span>
</div>
</div>
</body>
</html>

---

Gracias a todos por la ayuda.

Vlad

-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of webmaster
Sent: Martes, 20 de Febrero de 2007 12:51 p.m.
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical

Christian,

27 páginas mas tarde, en la sección de CSS de forosdelweb.com debo de decirte 
que sigo con el mismo problema.  

Llegamos a 2 posibles soluciones:

Tabla Sama
Y centrado con height definido.

Si tu viste algo que yo no vi, por favor enviame el link, que creo que quedaria 
genial matar este problema.

-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Christian Roque 
Geldres
Sent: Martes, 20 de Febrero de 2007 12:12 p.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical

Busca en forosdelweb.com, ahí se ha preguntado eso varias veces, el ejemplo de 
kemie me desconcierta, ¿el diplay: table-cell no haría que todo dentro del body 
se muestre en linea? ¿O es solo el body el que esta en línea?

Claro que seria mas fácil con una tabla, es mas, seria mas fácil si lo dibujas 
en Paint perfectamente centrado lo grabas como imagen y lo subes de esa manera.

Christian Roque G.

-----Mensaje original-----
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de webmaster
Enviado el: martes, 20 de febrero de 2007 12:43
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Cosas Basicas: Centrado Vertical

Te digo algo muy sencillo, el de tierra de nomadas funciona hasta que el 
contenido supera el 80% de alto de la página que es el que usan default, o 
funciona hasta que cualquiera que definas como height, sea centrada (por eso es 
que este centrado vertical es con contenido fluido).

Y sobre lo de google, si buscas un poquito mas de hilos veras que se a buscado, 
y que la solución no pareciera encontrarse hasta lo que puso kemi hoy con un 
poco de script.

En cierto punto, tiene razón el almirante, es mas sencillo con una tabla, la 
cosa es, lograrlo hacer sin ella. 

-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Christian Roque Geldres
Sent: Martes, 20 de Febrero de 2007 10:49 a.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical

Y que me dices de esto:
http://www.tierradenomadas.com/tw003.phtml

y que de esto:
http://www.google.com.pe/search?hl=es&q=centrado+vertical+con+CSS&meta=

ejemplos hay hasta por gusto, y kemie dio uno mas, otra cosa es que no se busque

Christian Roque G.
-----Mensaje original-----
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de LISTAS
Enviado el: martes, 20 de febrero de 2007 11:37
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Cosas Basicas: Centrado Vertical

Si hay algo que una estúpida tabla nos permite, es centrar un objeto 
exactamente en el medio de la pantalla. Es una de las cosas más vergonzantes 
que vi respecto a CSS, ya que ni poniendo y sacando DTD o haciendo engendros 
mutantes de ingeniería casera (léase parcheos con JavaScript) haremos alto tan 
fácil como:

<table width="100%" height="100%">
<tr align="center" valign="middle">
 <td><img src="tu_imagen.gif">
 </td></tr></table>

Reforzándolo con el siguiente DTD (si se quiere):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Claro: hay cosas desaprobadas (todo, ¡ja!)... pero un ciego lo puede "ver" y un 
sordo lo puede "oir"... ¡Qué lo parió!

Mi abuela decía: "si es malo y funciona, es bueno; si es bueno y no
funciona: es una mierda" (perdón las chicas y los puritanos).

Almirante von Web/.
--------------------------------------
"Educando al asno, por no apalearlo."
©2007 ;-)

----- Original Message -----
From: "webmaster" <[EMAIL PROTECTED]>
To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org>
Sent: Tuesday, February 20, 2007 12:42 PM
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical



De cualquier manera si alguien aca se le ocurre como solucionar el problema de 
cómo centrar verticalmente, con un alto no definido para el div a centrar, se 
le agradeceria mucho.

Gracias.

-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of NetVicious
Sent: Lunes, 19 de Febrero de 2007 06:03 a.m.
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical

En el IE6 no sale centrado.

Yo al final he optado por centrar la capa con JavaScript y asunto solucionado.

Putatidas:
- Si pones la capa visible al principio hay un pequeño momento en el que se vé 
la capa a la izquierda
- Si pones la capa oculta antes del centrado y el usuario va sin javascript no 
se ve nada.

El miércoles, 14 feb 2007 a las 22:45, escribiste:

> <style type="text/css">
>         * {
>                 margin:0;
>                 padding:0;
>                 }
>         html, body {
>                 height:100%;
>                 }
>         body {
>                 background-color:#999;
>                 }
>         #distancia {
>                 width:1px;
>                 height:50%;
>                 margin-bottom:-13.75em; /* half of container height */
>                 float:left;
>                 }
>         #container {
>                 margin:0 auto;
>                 position:relative; /* puts container in front of 
> distancia */
>                 height:27.5em;
>                 width:45em;
>                 clear:left;
>                 background-color:#666;
>                 border:1px dashed #fff;
>                 }
> </style>
> </head>
> <body>
> <div id="distancia"></div>
> <div id="container"></div>
> </body>
> Un cordial saludo de SantosVZ



--
  /\    /
 /  \  /     \  /
/    \/ e t   \/ i c i o u s
   ........................


_______________________________________________
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
_______________________________________________
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

_______________________________________________
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

_______________________________________________
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
_______________________________________________
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

_______________________________________________
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
_______________________________________________
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
_______________________________________________
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

Responder a