Tecniche per centrare un box in orizzontale ed in verticale in una pagina web.
ALLWEB free
Web Directory Script Linguaggi
Italiano Inglese Tutte
 
 01 Aug 2014
aggiungi in preferiti  
Home    Mappa directory    Script




Centrare un box:

Al momento esistono svariati browser sulla rete (tutti gratuiti), e tutti dovrebbero rispettare i codici di programmazione delineati dal W3C, l'organo preposto a creare linee guida per la programmazione web.

Il web sta cambiando. Il linguaggio HTML Ŕ ormai vecchio, e trova un valido e simile concorrente nell' XHTML. Tale linguaggio prevede un forte utilizzo dei CSS, unito al famigerato BOX MODEL, che in pratica non Ŕ altro che un utilizzo dei box DIV al posto delle vecchie TABELLE html per il layout del sito.

Riuscire a centrare un box all'interno di una pagina web vuol dire riuscire a far combaciare tutti i limiti dei browser in circolazione in un'unica soluzione, pratica ed efficente.

Attualmente esistono pi¨ tecniche per centrare un box, vediamo quali possiamo utilizzare:

Posizione assoluta:

Per posizione assoluta intendiamo dire che un box viene centrato in una pagina utilizzando le sue coordinate, fissandole rispetto al foglio (o tag body).
Questa tecnica si pu˛ utilizzare solo con i box di misura fissa e conosciuta (Essenziale per determinare le coordinate).
Con questa tecnica si pu˛ centrare un box in orizzontale e/o in verticale.

Come reagisce il browser?
Per centrare un box al centro pagina il browser dovrebbe centrare la coordinata del centro box.
In realtÓ i browser centrano la coordinata dell'angolo in alto a sinistra del box.
Per risolvere questo problema dobbiamo inserire margini negativi all'interno dei css del box (per bilanciare il comportamento dei browser). La misura dei margini Ŕ uguale alla metÓ della larghezza e alla metÓ dell'altezza del box (con valori negativi).

Esempio box centrato in vericale e orizzontale:
<body>
<div style="border:1px solid black; width:400px; height:400px; position:absolute; top:50%; left:50%; margin:-200px 0 0 -200px;">
Contenuto box
</div>
</body>
Puoi vedere il risultato in questa pagina di esempio.


Esempio box centrato solo in orizzontale:
Per centrare un box solo in orizzontale dobbiamo togliere i riferimenti verticali dal codice dell'esempio precedente, ottenendo il codice sottostante.
<body>
<div style="border:1px solid black; width:400px; height:400px; position:absolute; left:50%; margin:10px 0 0 -200px;">
Contenuto box
</div>
</body>
Puoi vedere il risultato in questa pagina di esempio.



Compromesso fra browser:

Il browser Internet Explorer Ŕ impostato diversamente dagli altri browser.
Per centrare i box in orizzontale, Internet explorer pretende l'inserimento della proprietÓ text-align:center; nel contenitore pi¨ grosso (che pu˛ essere body, oppure un'altro box).
Mentre gli altri browser (firefox, opera, safari e google chrome), pretendono l'inserimento della proprietÓ margin:0 auto 0 auto; nel box che deve essere centrato.

Per unire questi due concetti di centratura dobbiamo unire entrambe le tecniche, inserendo anche text-align:left; nel box da centrare, per evitare che l'ereditarietÓ dei Css ne condizioni la posizione del testo.


Esempio di centratura con Internet Explorer
Almeno fino alla versione 7.
<body style="text-align:center;">
<div style="border:10px solid black; width:400px; height:400px; text-align:left;">
Contenuto box
</div>
</body>
Puoi vedere il risultato in questa pagina di esempio.

In questo caso vediamo:

Con Firefox, safari, opera e google chrome:
pagina non centrata in firefox, safari, opera e google chrome
Con Internet Explorer7:
pagina centrata in internet explorer7




Esempio di centratura con Firefox, opera, safari e google chrome:
<body>
<div style="border:10px solid black; width:400px; height:400px; margin:0 auto 0 auto;">
Contenuto box
</div>
</body>
Puoi vedere il risultato in questa pagina di esempio.

In questo caso vediamo:

Con Firefox, safari, opera e google chrome:
pagina centrata in firefox, opera, safari e google chrome
Con Internet Explorer7:
pagina non centrata in internet explorer7




Esempio di centratura per TUTTI i browser
<body style="text-align:center;">
<div style="border:10px solid black; width:400px; height:400px; margin:0 auto 0 auto; text-align:left;">
Contenuto box
</div>
</body>
Puoi vedere il risultato in questa pagina di esempio.

In questo caso vediamo:

Con Firefox, safari, opera e google chrome:
pagina centrata in firefox, safari, opera e google chrome
Con Internet Explorer7:
pagina centrata in internet explorer7