Nwlapcug.com


Come centrare la mia intera pagina Web

Una pagina Web centrata dà ai tuoi visitatori un modo conveniente per guardare il vostro lavoro, perché la pagina Visualizza sempre al centro di un browser, anche se il visualizzatore si restringe o tratti la finestra. Tradizionalmente, siti Web allineare a sinistra nel browser, ma hai la possibilità di aggiungere Cascading Style Sheets (CSS) per creare le regole per come eseguire il rendering la visualizzazione. Editor di testo del computer per inserire il codice CSS che si concentra tutta la pagina Web di accesso.

Istruzioni

1

Portare il tuo software di editor di testo e avviare il file della pagina Web. Digitare quanto segue tra il "< testa >< / testa >" tag per creare un segnaposto per le regole CSS:

< style type = "text/css" >

<!...

-->

< / stile >

2

Immettere la regola di classe di "corpo" tra i trattini nel codice precedente e il tipo "margin: 20px 0px;" e "padding: 0px;" tra le parentesi graffe. Inoltre, immettere "text-align: center;" per assicurarsi che la pagina venga visualizzato centrato sul browser Internet Explorer 5. Per illustrare:

corpo {margine: 20px 0px; padding: 0px; text-align: center;}

3

Digitare una parola di vostra scelta, ad esempio "#main", che denomina la regola CSS che controlla l'allineamento del contenuto sulla tua pagina. Immettere "larghezza," "margine", "text-align" e «riempimento» attribuisce le parentesi graffe come segue:

principale {Larghezza:; margine:; text-align:; imbottitura:;} 4

Immettere un numero dopo la larghezza per determinare la lunghezza orizzontale della pagina Web. Digitare un valore dopo imbottitura per specificare quanto spazio vuoto c'è tra il testo e i confini della tua pagina. Immettere "0px auto" dopo "margine" e "sinistra" dopo "text-align" per sostenere l'obiettivo di allineamento del centro. Per esempio:

principale {Larghezza: 650px; margin: 0px auto; text-align: left; padding: 10px;} 5

Salvare il file. Il codice completo ora appare come segue:

< style type = "text/css" >

<!...

corpo {margine: 20px 0px; padding: 0px; text-align: center;}

principale {Larghezza: 650px; margin: 0px auto; text-align: left; padding: 10px;}

-->

< / stile >

Consigli & Avvertenze

  • Avete l'opzione per modificare il valore di "20px" del margine (passaggio 2) per controllare quanto spazio viene visualizzata sulla parte superiore e inferiore della pagina Web.
  • Visualizzare in anteprima il vostro lavoro selezionando l'opzione del browser "Open" o "Apri File" sotto il menu "File" e quindi selezionare la pagina Web dalla finestra di dialogo che appare.