Centrado vertical con CSS

[moNTeZIon]

Se que aquí se mezclan varias cosas.
Pero hoy por hoy, algo que no funcione en Explorer, bajo mi punto de vista, debo desecharlo. Ya me gustaría no tenerlo que hacer, pero no nos engañemos.
Otra cosa es que exista una especie de "hack" para explorer, para conseguir un centrado vertical del contenido de un DIV, pero en este caso, creo que ni eso. Básicamente es por lo que recurro a una tabla para realizar un centrado vertical.
Ya os confirmo que Explorer 7 tampoco se traga eso del display: table-cell

Entonces, dicho esto, alguien puede afirmar que puedo dejar de tener que meter un <TD style="vertical-align: middle;"> en mi código, porqué puedo hacerlo a través de CSS y que también se lo trague Explorer???
Estoy impacienteeeeeeee!!
Un saludo a todos.

[okram]

Date una vuelta por aqui

http://www.jakpsatweb.cz/css/css-ver...-solution.html

Un saludo,

[Daniel Ulczyk]

Iniciado por moNTeZIon

Pero hoy por hoy, algo que no funcione en Explorer, bajo mi punto de vista, debo desecharlo.

En el día a día el uso de tal browser, sigue inevitablemente en franco retroceso:

Browser Statics

Simplemente llevando a cabo sencillas operaciones matemáticas:

uso del IE (incluye IE5, IE6 e IE7)

jun 07: 58.5%
jun 06: 64.1%
jul 05: 73.8%

Iniciado por moNTeZIon

Otra cosa es que exista una especie de "hack" para explorer, para conseguir un centrado vertical del contenido de un DIV, pero en este caso, creo que ni eso.

Y en definitiva, cada uno es dueño de dar la espalda a las soluciones que se presentan ante esta "caprichoso" navegador.

Iniciado por moNTeZIon

Ya os confirmo que Explorer 7 tampoco se traga eso del display: table-cell

Lo cual no es raro, pareciera una marca distintiva y constante el darle la espalda a los estándares.
Aunque, caramba! por cierto figuran como miembros


Finalmente, aporto con el ejemplo de Dead Centre
Como verás, en esto no hacen falta hacks para el IE

[moNTeZIon]

Ei gracias, por las respuestas!!
Daniel, en tu caso, me quedo con esta frase, que aparece en el párrafo de la derecha, justo al final de éste:
"To get it to centre vertically, it has a negative top position that is exactly half of its height, -35px."
Efectivamente, ahí está la cosa.
Cuando centramos verticalmente, no solemos saber la cantidad de texto que va a ubicar, por eso nos va tan bien poner vertical-align: middle y nos olvidamos. Parece ser que en en ejemplo de Dead Centre usan una caja con unas medidas concretas. Estas jugadas de restarle el margin al height de la capa ya me las sabía, pero no me solucionan el centrado vertical dentro de un DIV, de un texto de longitud indeterminada.
Qué piensas?

[moNTeZIon]

Okram,
Tu ejemplo, al final, también comenta esto:
"The code below works in Internet Explorer 5.0, 5.5 and 6.0, in Gecko browsers (Mozilla, Firefox, Netscape 7), in Opera 7, Konqueror 3.3.1. (maybe lower too), and in Safari."
Uséase, no chuta en Explorer 7, a patre de las cosas que hay que hacer para cada navegador. Vaya fastidio madre mía.
En fin. No me convencen.
A ver si cae alguna idea más, pero parece que todas van por el mismo camino. Algunas incluso usando JavaScript para leer el height de una capa... Solo para centrar verticalmente. Esto es un chasco

[marioraja]

Ami el verticar-align no me funciona, no me hace ningún efecto. Lo que sale en la dirección que da Okram parece un poco enrevesado ¿no? No hay otra forma más elegante de conseguir el centrado verticar del contenido para una celda o una capa?

[Daniel Ulczyk]

No hay otra forma más elegante de conseguir el centrado verticar del contenido para una celda o una capa

Claro que la hay, la forma simple y elegante es la que oportunamente Al Zuwaga escribió en este thread
Pero, como bien se aclara, IE no implementa todavía esta característica de CSS. La cual no es exigible ya que es CSS2.1 Draft.

Otra cosa es que exista una especie de "hack" para explorer, para conseguir un centrado vertical del contenido de un DIV, pero en este caso, creo que ni eso. Básicamente es por lo que recurro a una tabla para realizar un centrado vertical.

Si todos los navegadores interpretasen de igual forma CSS, los hacks entonces claro que no existirían.
Desde aquí no intento convencer a nadie. simplemente no utilizo tablas para llevar a cabo el diseño.

Cuando centramos verticalmente, no solemos saber la cantidad de texto que va a ubicar

Afortunadamente nunca fue mi caso

[moNTeZIon]

Iniciado por Daniel Ulczyk

Desde aquí no intento convencer a nadie. simplemente no utilizo tablas para llevar a cabo el diseño.

Te sentiste que alguien te intenta convencer de algo?? No era la intención Daniel. Solo tengo una duda sobre algo que me encuentro dia si y dia no. Y por intentar hacer las cosas bien, me surge esta duda, no por otro motivo.

Iniciado por Daniel Ulczyk

Afortunadamente nunca fue mi caso

Nunca fue tu caso el tener que centrar verticalmente un texto de longitud indeterminada??, por ejemplo, un texto que proviene de una base de datos?? jeje, esta si que no me la creo!

En este post se intenta buscar una solución a ese centrado vertical, sin tener que hacer uso de Javascript, y pudiendo evitar las tablas para realizar eso. Ese mi objetivo básico.

Un saludo!

[Daniel Ulczyk]

Nunca fue tu caso el tener que centrar verticalmente un texto de longitud indeterminada??, por ejemplo, un texto que proviene de una base de datos?? jeje, esta si que no me la creo!

Verdaderamente! para textos de longitud variable nunca por demandas de diseño tuve que recurrir al centrado vertical.

Iniciado por moNTeZIon

En este post se intenta buscar una solución a ese centrado vertical, sin tener que hacer uso de Javascript, y pudiendo evitar las tablas para realizar eso. Ese mi objetivo básico.

Afortunadamente, en poco tiempo, por lo menos estamos de acuerdo en un punto importante.

[moNTeZIon]

Iniciado por Daniel Ulczyk

Verdaderamente! para textos de longitud variable nunca por demandas de diseño tuve que recurrir al centrado vertical.

Va! Me la creo porqué eres mucho diseñador, y poco programador
Un saludo Daniel