¿Cómo puedo ubicar una página web en el medio de la pantalla? como las páginas en el sitio web stackoverflow? Escribo la página maestra de mi sitio web y quiero usar HTML y CSS para colocar la página maestra en el medio de la pantalla y luego construir el bloque de posicionamiento interno usando css. ¡Pero no puedo hacer que mi página se visualice en el medio!¿Cómo puedo ubicar una página web en el medio de la pantalla?
¡Gracias!
Usted puede utilizar márgenes para posicionarlo en el centro horizontal.
Dada esta html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div id="page"> ... content ... </div>
</body>
</html>
El CSS puede ser tan simple como:
#page {
margin-left:auto;
margin-right:auto;
width:960px;
}
También es necesario asegurarse de que tiene un tipo de documento válido para que esto funcione.
que puede probar:
<center>
Esto es más texto para cumplir con el mínimo 30character.
Como cheezy como suena esta respuesta, aún no he visto un navegador que NO funcione perfectamente bien en .. –
Pregunta pregunta por CSS, hasta donde puedo leer. – strager
supongo que id no leyó completamente la pregunta, y casi pongo algo en mi respuesta diciendo que no es la solución más elegante, o una solución CSS. Dicho esto, funcionará. – shsteimer
poner todos sus contenidos en un recipiente y darle un margen: 0 auto
<div style="width: 800px; margin: 0px auto;">
your content here
</div>
Marque esta página si desea horizonal y alineación vertical: http://www.wpdfd.com/editorial/thebox/deadcentre2.html
Crear una <div> en su <body> así:
<body>
<div id="main">
<!-- ... -->
</div>
</body>
Y añadir el siguiente CSS:
body {
text-align: center; /* IE */
}
#main {
margin-left: auto;
margin-right: auto;
text-align: left; /* IE */
width: XXX; /* Fill this out. */
}
envuélvalo todo en un div con margen: automático y haga que el cuerpo tenga text-align: center.
Deje el código HTML sea de la siguiente manera:
<body>
<div class="box">.....</div>
</body>
Y siguiendo el código CSS:
.box{
width: 200px;
margin: 10px auto;
}
El código CSS anterior será establecer el ancho de 200 píxeles para el div y establecerá a partir abajo y hasta 10px y el margen desde la izquierda a la derecha a auto eso significa que automáticamente ajustará su posición al centro. El auto garantiza que los márgenes izquierdo y derecho se establecerán en el mismo tamaño.
Solo necesita un tipo de documento válido para que IE lo entienda correctamente. Sin embargo, no creo que IE6 entienda los márgenes automáticos. – strager
Creo que IE6 entiende los márgenes automáticos si hay un tipo de documento válido presente. Al menos en la versión 6.0.2900.2180.xpsp_xp2_gdr.080814-1233. Wow, eso fue una boca llena. –
@strager: puede, pero tiene que usar un pequeño hack css donde alinea texto: centre el elemento primario (el cuerpo en este caso) y luego colóquelo de nuevo en text-align: left; en el elemento que quieres centrar –