 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Directorio
|
Manuales
|
Scripts
|
FAQs
|
Programas
|
Artículos Copyleft
|
Actualidad
|
La Cosecha
|
Colabora
Alojamiento
|
Dominios.es
|
Micropagos SMS
|
Buscadores
|
Patentes, marcas
|
Creación web
|
Multimedia
|
Videos
Alinear el contenido horizontal y verticalmente
|
¿Cómo puedo alinear el contenido de mi pagina web al centro? Me refiero al centro en horizontal (que es fácil) y al centro vertical, que me resulta más dificil.
La FAQ Alinear el contenido horizontal y verticalmente tiene Pertenece a la categoría:
Comentarios de los visitantes
Comentario de Miguel Angel Alvarez
06/5/05
Resulta que es un tema complicado este, si queremos centrar verticalmente usando únicamente CSS. Buscando un poco no he conseguido que me funcione como yo quiero al 100% ninguna de las soluciones.
Casi todos los documentos que he encontrado sirven para centrar los elementos verticalmente en una capa, pero no para centrarlos verticalmente en la página entera. Te paso las referencias que he consultado, que han ofrecido una solución más óptima: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html Que tiene un resumen en castellano en: http://www.forosdelweb.com/showpost.php?p=967310&postcount=50 Pero al convertir la solución anterior para que me muestre centrado para todo el contenido de la página y no sólo para una capa, en Internet Explorer, cuando los elementos de la página crecen mucho verticalmente, se me pierden por la parte de arriba. El código sería el siguiente: <html> <head> <title>centrar una capa verticalmente</title> <style type="text/css"> BODY{ text-align: center; } #total{ display:table; height:100%; text-align: left; margin: auto; } #contenido{ _position: absolute; _top: 50%; display: table-cell; vertical-align: middle; text-align:left; width:400px; } #centrar{ _position: relative; _top: -50%; background-color:e0e0e0; border-style:solid; border-width:2px; border-color:#999999; } </style> </head> <body> <div id="total"> <div id="contenido"> <div id=centrar> <h1>Hola</h1> Esto está alineado verticalmente... es una prueba como otra cualquiera. Pillo un texto cualquiera para pegar aquí y hacer que el tamaño de la capa crezca un poco. <br><br> Código que nos ayuda a crear un menú con css similar a los de Javascript. <br> <br> El siguiente estilo nos permite crear un menú similar a los de javascript, en donde representamos su estado de reposo (out) con un color y su estado sobre (over) con otro. </div> </div> </div> </body> </html> Funciona correctamente, pero prueba a aumentar el texto de la capa principal... si pones más texto del que cabe en una ventana, se pierde por la parte de arriba y no se puede visualizar. En Mozilla me funciona perfectamente. Existen otros ejemplos que me han gustado. Son más simples aunque no sirven para todos los casos y sólo nos solucinan el problema parcialmente. Los comento por si te sirven de algo: - Centrado del texto de una capa, siempre y cuando este texto tenga una sóla línea: http://wellstyled.com/css-single-line-vertical-centering.html - Centrado de todo el contenido de la página, aunque para un ancho fijo del documento. Es decir, si la página tiene más contenidos que el espacio reservado, la solución deja de funcionar: http://vmalek.murphy.cz/ Comentario de Ariel
08/2/06
Si utilizas el <!DOCTYPE ya sea strict, transitional o frames... no podras utilizar este codigo pues el parametro height es considerado obsoleto. Pero eso solo si quieres hacer las cosas bien y compatibles, respetando los estandares de la W3C
Comentario de Pibe
08/3/06
Mira lo que puedes hacer es una tabla y dentro de esa tabla todo el contenido. Despues centras la tabla.
<center><table></table></tenter>. Así la centras horizontalmente. Si lo que quieres es centrarla verticalmente <table vspace="valor">. Comentario de Eloi de San Martin
08/9/06
Existe una manera de centrar un objeto simplemente usando sus propiedades CSS:
http://www.programacionweb.net/articulos/articulo/?num=461 Comentario de ceci
11/10/06
Hola les cuento que a mi si me funcionó ese código pero porque solo era una tabla con imágenes la que necesitaba centrar, eso si tuve que meter todo en una tabla. Muchas gracias!!!!
Para ver más FAQ relacionadas accede a las categorías: |
|
||||||||||||||||
 | Complementar la respuesta |
 | Volver al árbol de categorías |
|
|
|
DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia | |
|
 |
|
 |
||
|
||||