Un requisito comune quando si progetta un sito Web è quello di avere il contenuto della pagina automaticamente centrato dal browser, non importa come ampia finestra del browser è. È possibile ottenere questo utilizzando la proprietà di margine di foglio stile CSS, assegnando un margine pari a sinistra e a destra della pagina. Poiché la larghezza del margine deve cambiare a seconda di quanto il browser del visitatore è grande, è utilizzare la parola chiave auto per il valore del margine. Questo indica al browser per calcolare il valore di margine corretto richiesto sui lati destro e sinistro per centrare la pagina automaticamente.

Istruzioni

1

Aprire un editor di testo o applicazione di sviluppo web e creare una nuova pagina HTML.

2

Aggiungere un tag div nella pagina che conterrà il contenuto della pagina centrata, inserendo il codice HTML riportato di seguito dopo il tag di apertura "< body >".

< div id = "pageContent" >
< p > si tratta di alcuni contenuti di esempio </p >
< / div >

3

Impostare la larghezza dell'area di contenuto della pagina, e dire al browser per calcolare i margini sinistro e destro automaticamente aggiungendo il codice seguente alla fine del codice HTML "< head >" sezione "< / head >".

< style type = "text/css" >

pageContent {

Larghezza: 910px;
margine sinistro: auto;
margine destro: auto;
}
< / stile >

Questo dice al browser di impostare la larghezza del div pageContent a 910-pixel e quindi creare uguali margini sinistro e destro, utilizzando lo spazio rimanente sulla schermata.

4

Salvare la pagina come "esempio. htm" e aprire in un browser Web. Si può vedere che il browser ha centrato automaticamente il contenuto. Se si modifica la larghezza della finestra del browser, il browser ricalcola il margine per mantenere la pagina centrata.

Consigli & Avvertenze

• Aggiungere un bordo a area di contenuto aggiungendo quanto segue lo stile di #pageContent:
• border: 1px solid #cccccc;
• Questo aggiunge un bordo grigio ampio massiccio di 1 pixel intorno il contenuto della pagina.