Centrado Vertical con CSS (actualizado)
Una buena razón por lo que muchas personas defienden el uso de tablas para la diagramación de contenidos de un sitio web, es porque éstas permiten el correcto centrado horizontal y vertical de los elementos contenidos dentro de sus celdas. La propiedad vertical-align no es soportada por los browsers actuales, y va a ser lanzada con CSS3.0 (junto con muchas otras bien interesantes). Pues, a continuación les presentaré un método donde se utiliza efectivamente vertical-align, junto a un atributo poco utilizado de display y un hack para IE, como siempre necesario.
Antes que nada, necesitamos que nuestra superficie esté definida, en este caso al 100% de la pantalla (sin scroll). Esto lo logramos con height: 100% en 2 partes: el html y el contenedor de lo que queremos mostrar:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
display: table;
height: 100%;
width: 100%;
margin: 0;
}
Nuestro poco utilizado display: table; lo que hace es dejar nuestro #container compacto, tal como nuesto viejo amigo
. Dentro de #content puedes encontrar display: table-cell; que se comporta tal como una celda dentro de una tabla (en este caso, #content sería una celda dentro de la tabla #container). Y es por este comportamiento de tablas que vertical-align entra en acción:
#content {
display: table-cell;
vertical-align: middle;
position: relative;
}
Para finalizar el hack para IE, donde se centra #container pero con porcentajes:
/* \*/
* html #content {
top: 50%;
left: 0;
height: 1px;
}
* html #content #inner {
position: relative;
top: -50%;
}
/* */
Dado la llegada de IE7, a través de comentarios en este artículo (a los cuales les agradezco mucho su preocupación) me hicieron saber que este método de centrado vertical no funcionaba correctamente en este browser. Por lo tanto, investigando, me topé con un mejor método, que con los que he probado funciona a la perfección.
Más sobre display:
Gracias a 456bereastreet.
Tiene buena pinta, haber si cuando termine los examenes me pillo un hosting y me fabrico un Themes chulo, y asi aprendo CSS un poco…
Saludos y gracias por el post;)
Sabes cuáles son las correcciones que sufrió IE 7 en la decodificación de sitios?
Fuera de las imágenes PNG, los siitos que se veían mal con IE6, se me siguen viendo horribles en el 7
XD
Buen trabajo, pero tal como está no funciona en ie7, ya que por un lado no cumple con los standares como su hermanito menor, y por otro, aunque el codigo con porcentajes si funciona, no lo interpreta correctamente al no soportar el star hack.
para que rule basta con utilizar comentarios condicionales:
#content {
top: 50%;
left: 0;
height: 1px;
}
#content #inner {
position: relative;
top: -50%;
}
Tal y como esta puesto, ya no sería necesario el star hack para el ie6 pues el condicional ya lo incluiría también.
Un saludo.
Buen punto AraDæn, he estado utilizando un monton Comentarios Condicionales y deberia de aplicarlo YA en mis posts. Lo complementare, saludos y nuevamente gracias.
Gracias a ti por tus experimentos, y publicarlos
Un saludo.
Por desgracia tampoco se ve correctamente en IE7. Si que es cierto que no se queda pegado arriba del todo, pero al redimensionar la ventana no funciona igual que FireFox o IE6…
He estado trasteando con los porcentajes, pero o es la solución, ya que lo que se arregla para una dimensión, se estropea para otra…
¿Es posible que IE7 llegase a funcionar correctamente? ¿O acaso soy demasiado iluso :)?
Saludos y gracias de antemano.
vaya…con IE7 no va…. con la buena pinta que tenia :S
SOBRE LA VERSIÓN 2.
Esta actualización funciona en IE7, pero no es igual que la versión anterior… Aquí tienes que conocer la altura de la caja. Con eso, es relativamente sencillo centrar verticalmente. Lo bueno era el método anterior, totalmente dinámico. ¿Qué pasa con las plantillas en el que texto aumenta o disminuye? La versión anterior era sencillamente espectacular. Lástima que este híbrido entre IE6 y FireFox sea tan inestable… Quizá una nueva versión del IE7 solucione este problema. Si encuentro la solución, no dudéis que la comunicaré de nuevo. Mientras tanto, el Mr. Microsoft seguirá jodiendo a los defensores de los estándares…
Gracias por todo,
Pacheco.
Buenas, he visto tu web y la verdad es que la funcion javaScript que les has puesto es bastante fina, aunque mejorable. Si quieres podemos compartitr algunoos de tus archibos y mejoramos el funcionamiento con flashes intercalados.
La verdade es que esta fina pero me gustria poder ver los archibos fuente parar modifcar alguna coss.
Gracisa
Open our maind
Hola! Gracias por tu ayuda… lamentablemente sigo en busqueda de una solución CSS pura para solucionar este problema, dejandome tener contenido vertical fluido y que funcione en la mayoria de browsers, en especial Ie7, ie6 y FF. Si se te ocurre algo por favor dejame saber, grax!
Me parece muy interesante y útil este experimento, pero me planteo una duda con lo de IE 7. El script es para IE en general, y sabemos que IE7 ha mejorado un poco la interpretación del modelo de cajas respecto a sus antecesores, de forma que si se introducen los hacks en un comentario condicional para IE 6 e inferior, sería posible que se viera bien en IE 7? No lo he podido probar porque no tengo IE7 aún. Lo dejo en el aire y si puedo hacer pruebas te comento…
Thank´s ;D
Vaya, me extrañaba no ver los comentarios, no los había leido por eso, con lo cual mi otro comentario es un poco obsoleto, perodón…
Como ya preguntan en los comentarios. ¿Hay forma de hacerlo sin conocer la altura de los bloques?
Yo intento alinear verticalmente un texto en un div y no hay forma. La idea es que se comporte igual que valign=’middle’ de las tablas.
¿Alguna idea?
Bueno chicos, solucionado lo del centrado vertical y horizotal.
En mi trabajo me paaron una dirección en cuyo código centran una capa dentro del cuerpo de una página web, peo la misma filosofía se puede emplear para centrar una capa dentro de otra o una imagen dentro de una capa. Eso sí hay que emplear comentarios condicionales para explorer, pero funciona a las mil maravillas en Firefox, Internet explorer 6 y 7, aquí teneis la página, que os aproveche:
http://www.aplus.co.yu/lab/rdc/
El segundo método es mas efectivo, sencillo y mas estandarizado para todos los navegadores pero sigue sin solucionar de forma efectiva el problema. Cuando reduces el navegador aun tamaño inferior al del div de centrado se pierde el contenido y no se puede acceder ni con scroll.
Sobre la solución que nos comenta Carlos Sanchez, tampoco nos sirve si le damos unas dimensiones fijas al div contenedor. En explorer 7 si funciona, pero en Firefox se pega a la izq.
No tengo mucha idea de css (parece que tu si).
Estoy buscando un código que haga lo que se supone que dices que hace este.
El problema es el siguiente:
- el primero de de tus códigos hace los quiero en FF pero no funciona en IE7 (esto ya o sabes)
- el segundo de los codigos funciona en IE7, pero mal. Mientras el objeto a centrar sea más pequeño que la ventana no hay problema. Si reduzco el tamaño de la ventana hasta hacerla más pequeña que el objeto, entonces la parte superior del objeto desaparece por el margen superior y no puedo subir el scroll para verla.
Se te ocurre cómo arreglar esto??
gracias.
David.
Hola, yo quiero centrar vertical un elemento li, pero no tengo ni idea de como hacerlo, he probado a poner display:table en el ul y display:table-cell en el li, pero no funciona, ni en ie7, ni en FF
Agradeceria cualquier ayuda.
Mi codigo:
Explicacion: Esto es el menu de la pagina, la idea es poder centrar verticalmente los enlaces en cada li.
#otras ul{
margin : 0px;
padding: 0px 0px 0px 4px;
list-style: none;
display:table;
}
#otras li{
text-align: left;
border: 0px solid #E9D596;
margin: 8px 0px;
/* padding: 4px 0px 0px 4px;*/
width:140px;
height:25px;
vertical-align:middle;
background: #E9D596;
border: 1px solid #FF0000;
display: table-row;
}
#otras A{
color: #451B08;
text-decoration:none;
}
vitogq, acabo de publicar un articulo q te puede ser de ayuda: Centrando texto verticalmente.
Suerte
Hola
Me parece que no existe ningun codigo robusto que sirva para centrar div.
En cuanto se minimiza, se estropea todo.
La solución real sería una tal , que al minimizar, puedas navegar por la pagina completa (maximizada) a traves de las barras de desplazamiento, siempre manteniendo las proporciones respecto a la ventana desponible maximizada.
Si das con la solución, enviame un correo.
Un saludo
en firefox no funciona ni en PC ni en MAC, en PC me sale un scrollbar para que se vea el margen inferior que tiene o que deberia tener el mismo margen superior.
alex, en mac funciona en safari 3, ff 3, y opra 9.5, en windows no he probado apenas tenga un pc a mano lo hago. pero este metodo funciona.
ese codigo no funciona en ie, solo mirando el ejemplo te das cuenta que no esta centrado
Hola Pues facilita la vida tus post , mas yo tengo el mismo problema:
el problema. Cuando reduces el navegador aun tamaño inferior al del div de centrado se pierde el contenido y no se puede acceder ni con scroll.
Esto sucede por ejemplo en bajas resoluciones 800×600 se que esta resolucion no es muyusada pero a veces los clientes solicitan para todas las resoluciones.
En la actualización ¿qué es lo que está centrado verticalmente? El div #contenedor tiene un margen superior fijado a 10px, luego no está centrado, está fijado. La capa #contenido tampoco está centrada con respecto a #contenedor, está pegada a arriba.
¿Podrías explicar este ejemplo mejor?
Gracias
Estoy usando Firefox 3.0.6
funciona bien en Firefox, pero en IE 7 no. Mi pregunta es, si lo visualizo desde una pc con resolucion mayor, igual qued centrado?
Pues en IE trate de darle zoom-out y lo que deberia estar centrado se iba mas para la esquina.
Muchisimas gracias… necesitaba este truquito xD. Saludos.
También se puede centrar verticalmente el texto del del div, utilizando padding o line-height. Eso sí, el texto debe ser de una sóla línea.
la verdad no me he fijado si funciona en IE porque uso una mac, después lo pruebo, una sugerencia para IE es usar algo como esto:
_margin-top:5px; este funciona para ie6
y si pones *margin-top:5px; funciona para ie6 y 7 o tambien otra forma seria usar margin-top:expression(documentElement?’5′:’10′); el 5 es para ie6 y 7 y el 10 para firefox, espero y les sirva, primero se declara margin-top que este ya serviria para los otros navegadores y si les falla pues usen esos tips.
En pleno siglo XXI y escribir tanto para centrar algo ….?????
Guauuu sera que los del consorcio w3c son personas comun y corrientes con conocimientos basicos o sera que firefox, ie, etc no sabne nada ???
NO LO CREO, pero entonces me pregunto porque el HTML y cs tiene muchsimos errores, yo creo que deben de rediseñar todo y no tratar de parcharlo
Orlando: entiendo la frustracion; la W3C ha hecho hasta ahora bien su trabajo, al crear las recomendaciones de estandares, el problema son los creadores de browsers q no hacen q sus motores interpreten correctamente estas recomendaciones. Por otro lado, fijate q son recomendaciones, lo q da para reinterpretaciones (y q es precisamente lo q ha sucedido).
Enfin, es un tema q da para largo… si te gusta la historia, escribi hace un tiempo sobre los origenes de todo esto, si tienes tiempo dale una leida.
salu2 y gracias por tus palabras.
Solo dar gracias por la info este me ha dado buen dolor de cabeza, estare probando.
Otra vez gracias y abrazos.