Come posso posizionare una pagina Web al centro dello schermo? come le pagine sul sito Web StackOverflow? Sto scrivendo la pagina principale del mio sito web e voglio usare HTML e css per posizionare la pagina principale al centro dello schermo e quindi costruire il blocco di posizionamento interno usando css. Ma non riesco a visualizzare la mia pagina nel mezzo!Come posso posizionare una pagina web al centro dello schermo?
Grazie!
È possibile utilizzare i margini per posizionarlo al centro orizzontalmente.
Dato questo 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>
Il CSS può essere semplice come:
#page {
margin-left:auto;
margin-right:auto;
width:960px;
}
È inoltre necessario assicurarsi di avere un DOCTYPE valida per questo al lavoro.
Si può provare:
<center>
Questo è più di testo per soddisfare il minimo 30character.
Per quanto sgradevole come questa risposta suona, devo ancora vedere un browser che NON funziona perfettamente bene su .. –
Domanda chiede CSS, per quanto posso leggere. – strager
Suppongo che id non abbia letto a fondo la domanda, e quasi ho messo qualcosa nella mia risposta dicendo che non è la soluzione più elegante o css. detto questo, funzionerà. – shsteimer
mettere tutti i tuoi contenuti in un contenitore e dargli un margin: 0 auto
<div style="width: 800px; margin: 0px auto;">
your content here
</div>
controllare questa pagina se si desidera horizonal e allineamento verticale: http://www.wpdfd.com/editorial/thebox/deadcentre2.html
Crea una <div> nella vostra <body> in questo modo:
<body>
<div id="main">
<!-- ... -->
</div>
</body>
e aggiungere il seguente CSS:
body {
text-align: center; /* IE */
}
#main {
margin-left: auto;
margin-right: auto;
text-align: left; /* IE */
width: XXX; /* Fill this out. */
}
avvolgi tutto in un div con margine: auto e fai body avere allineamento del testo: center.
Lasciate che il codice HTML sia come segue:
<body>
<div class="box">.....</div>
</body>
E seguendo il codice CSS:
.box{
width: 200px;
margin: 10px auto;
}
il codice CSS sopra imposterà la larghezza a 200px per il div e sarà impostato da in basso e fino a 10 px e il margine da sinistra a destra a auto significa che regolerà automaticamente la sua posizione al centro. Lo auto garantisce che i margini sinistro e destro siano impostati sulla stessa dimensione.
Hai bisogno di un doctype valido perché sia compreso correttamente da IE. Tuttavia, non penso che IE6 comprenda i margini automatici. – strager
Credo che IE6 comprenda i margini automatici se è presente un doctype valido. Almeno nella versione 6.0.2900.2180.xpsp_xp2_gdr.080.814-1.233. Wow, era una bocca piena. –
@strager: può, ma devi usare un piccolo css hack dove hai allineato il testo: centra il genitore (il corpo in questo caso) e poi lo metti di nuovo in text-align: left; sull'elemento che vuoi centrare. –