Tengo intenciones de hacer un sitio con varias páginas con poco contenido, el cual deberá quedar centrado en el navegador sin importar la resoución de pantalla del visitante.
Desde ya, muchas gracias a cualquier aporte
| |||
para centrarlo horizontalmente
Código:
Se sobre entiende que todo tu contenido debe estar dentro de un div contenedor en mi ejemplo con el id container eso te debe de servir, de cualquier forma te recomiendo especificar un valor para el width -ancho- de tu div, considerando que la resolución estandar es 1024x768 (aunque hay poca gente aun con 800x600) te recomiendo definir un width de alrededor de 700pxdiv#container { margin: 0 auto; } saludos.
__________________ | Smoke citizen |
| ||||
para centrar el contenido verticalmente necesitarias un contenedor de medidas absolutas, y el método es bastante intuitivo. Lo posicionas en absoluto respecto a la pantalla, le das un margen hacia arriba del 50% (de esta manera tu contenedor se situaría desde la mitad hacia abajo) y para acabar de centrarlo le das un margen negativo hacia arriba que sea la mitad de lo que mide verticalmente. Así explicado puede parecer lioso pero en la practica es muy facil. Un saludo! |
| ||||
Muchas gracias Ninguna de las respuestas que me han dado me parece tan complicada que no se pueda hacer. En este momento estoy en el trabajo, pero cuando llegue a casa lo pruebo y les cuento. Gracias nuevamente
__________________ Todo se ve mejor si le miramos el lado positivo. |
| ||||
![]() En realidad solo probé con la idea de hunab que fue la que me pareción más comprensible y funcionó perfectamente. ![]()
__________________ Todo se ve mejor si le miramos el lado positivo. |
| ||||
Para centrar una capa tanto horizontal como verticalmente uso esto:
Código:
<HTML> <HEAD> <style> #centrado { position: absolute; margin-top:50%; margin-left:50%; top:-250px; left:-250px; width: 500px; height: 500px; border: 1px solid #000; text-align: center; } </style> </HEAD> <BODY> <div id=centrado>X</div> </BODY> </HTML> ![]() |
| |||
Hola a todos, hola Wel. Lo estás haciendo al revés. Código HTML: margin-top:-250px; margin-left:-250px; top:50%; left:50%; Código HTML: #centrado { position: absolute; top:30%; left:30%; width: 40%; height: 40%; border: 1px solid #000; text-align: center; } |