Foros del Web » Creando para Internet » CSS »

Centrado vertical con CSS

Estas en el tema de Centrado vertical con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/07/2007, 09:18
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 19 años, 2 meses
Puntos: 9
Centrado vertical con CSS

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.
__________________
..:: moNTeZIon ::..
  #2 (permalink)  
Antiguo 05/07/2007, 17:24
okram
Invitado
 
Mensajes: n/a
Puntos:
Re: Centrado vertical con CSS

Date una vuelta por aqui

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

Un saludo,
  #3 (permalink)  
Antiguo 05/07/2007, 18:28
Avatar de Daniel Ulczyk
Super Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.263
Antigüedad: 19 años
Puntos: 2114
Re: Centrado vertical con CSS

Cita:
Iniciado por moNTeZIon Ver Mensaje
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%
Cita:
Iniciado por moNTeZIon Ver Mensaje
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.

Cita:
Iniciado por moNTeZIon Ver Mensaje
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
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #4 (permalink)  
Antiguo 06/07/2007, 01:30
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 19 años, 2 meses
Puntos: 9
Re: Centrado vertical con CSS

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 ::..
  #5 (permalink)  
Antiguo 06/07/2007, 01:40
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 19 años, 2 meses
Puntos: 9
Re: Centrado vertical con CSS

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
__________________
..:: moNTeZIon ::..
  #6 (permalink)  
Antiguo 06/07/2007, 02:28
Avatar de marioraja  
Fecha de Ingreso: abril-2007
Mensajes: 66
Antigüedad: 16 años, 11 meses
Puntos: 0
Mensaje Re: Centrado vertical con CSS

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?
__________________
En mi web tengo cursos para webmasters: xHTML y CSS.
http://www.aprende-gratis.com
  #7 (permalink)  
Antiguo 06/07/2007, 15:24
Avatar de Daniel Ulczyk
Super Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.263
Antigüedad: 19 años
Puntos: 2114
Re: Centrado vertical con CSS

Cita:
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.
Cita:
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.
Cita:
Cuando centramos verticalmente, no solemos saber la cantidad de texto que va a ubicar
Afortunadamente nunca fue mi caso
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #8 (permalink)  
Antiguo 09/07/2007, 02:52
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 19 años, 2 meses
Puntos: 9
Re: Centrado vertical con CSS

Cita:
Iniciado por Daniel Ulczyk Ver Mensaje
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.
Cita:
Iniciado por Daniel Ulczyk Ver Mensaje
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!
__________________
..:: moNTeZIon ::..
  #9 (permalink)  
Antiguo 09/07/2007, 08:22
Avatar de Daniel Ulczyk
Super Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.263
Antigüedad: 19 años
Puntos: 2114
Re: Centrado vertical con CSS

Cita:
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.
Cita:
Iniciado por moNTeZIon Ver Mensaje
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.
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #10 (permalink)  
Antiguo 09/07/2007, 10:10
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 19 años, 2 meses
Puntos: 9
Re: Centrado vertical con CSS

Cita:
Iniciado por Daniel Ulczyk Ver Mensaje
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
__________________
..:: moNTeZIon ::..
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 23:28.