Centrar la pagina en la pantalla

LeandroA · #1 (**permalink**) 15/09/2008, 08:52

Buenas, una pregunta creo vastante tonta. veo muchas paginas que centran sun contenido al medio de la pantalla pero no se como se hace.
por ejemplo:

http://www.cristalab.com/tutoriales/...h-en-html.html

o esta

http://es.answers.yahoo.com/question...3131046AAHzePa

como se hace con una tabla? me podrian mostra un ejemplo.

Muchisimas Gracias y disculpen la ingorancia.

ElJavista · #2 (**permalink**) 15/09/2008, 08:58

A ver, el problema con las preguntas tontas es la metodología para aprender. A lo mejor sea por el tiempo pero la persona que pretende hacer la página la quiere hacer ya! sin antes haber hecho algo más simple. O sea, quiere correr una maratón cuando no puede ni correr 2 cuadras. Ese es el problema. Es posible que la culpa no sea del novato mismo, sino de la presión que tiene por el tiempo. En todo caso el consejo es no intentar subir al 7mo escalón en el primer paso sino poco a poco, aprender poco a poco, sin apuros. De este modo no habrán vacíos tan grandes en su aprendizaje y eso les ahorrará el tener que escribir preguntas tontas.

Bueno, para tu caso haz lo siguiente: Encierra todo el contenido en un DIV con el estilo centrado. De qué forma? Así mira:

<DIV style="text-align: center">
Contenido
</DIV>

No importa lo que sea el contenido, puede ser cualquier cosa, absolutamente cualquier cosa. Eso funcionaría en I.E. pero en firefox falta algo. Para solucionar el problema de manera simple, haz otro DIV dentro del este DIV, la cosa quedaría así:

<DIV style="text-align: center">
<DIV style="width: 780px; margin-left: auto; margin-right: auto">
Contendio
</DIV>
</DIV>

Obviamente el valor 780 es un ejemplo, puedes poner el valor que necesites.

sumolari · #3 (**permalink**) 15/09/2008, 09:05

Es muy sencillo, entre las etiquetas <head> y </head> debes añadir el siguiente código CSS:

Código:

<style type="text/css">
#content {
margin:0 auto;
}
</style>

También puedes poner el código CSS en un archivo suelto, de hecho es mejor hacerlo así.

Luego entre las etiquetas <body> y </body> añade una capa con id content, así:

Código HTML:

<div id="content">
</div>

Y entre esas capas escribe el contenido que quieres que esté centrado.

Otra opción usando menos código es dejando de lado el código CSS que he puesto antes y escribir directamente entre <body> y </body>:

Código HTML:

<div style="margin:0 auto;">
</div>

De todas formas te recomendaría que buscases algún tutorial de CSS básico, siempre viene bien saber más de lo que necesitas, por si algún día necesitas más que ahora.