CREARE SITI WEB in HTML e CSS > Centrare un BLOCCO
I blocchi visti precedentemente non sono centrati rispetto alla finestra del browser.
Per centrare un blocco devi usare dei valori in percentuale.
La dichiarazione:
#blocco0 {position: absolute; top:50%; left: 50%; }
centra l'angolo in alto a sinistra del blocco numero 0.Ma questo non basta per centrare il blocco.
Infatti quello che viene centrato è l'angolo alto sinistro del blocco (vedi figura A)
| codice HTML |
|
<html> <head> <title>Blocco centrato</title> <style type="text/css"> #blocco0 {width:200px; height:200px; background: olive } #blocco0 {position: absolute; top:50%; left: 50%; } </style> </head> <body> <div id="blocco0">Blocco numero zero</div> </body> </html> |
| risultato pagina web (figura A) |
 |
Serve un piccolo trucco per centrare un blocco:
- imposta il margine sinistro e alto del blocco, rispettivamente, a metà della sua larghezza e altezza, e assegnagli valore negativo.
Ad esempio, se il blocco è largo 200 pixel (width:200px) e alto 200 pixel (height:200px)
- la dichiarazione da impostare è:
#blocco0 { margin-left:-100px; margin-top:-100px }}.
Vedi figura successiva.| codice HTML |
|
<html> <head> <title>Blocco centrato</title> <style type="text/css"> #blocco0 {width:200px; height:200px; background: olive } #blocco0 {position: absolute; top:50%; left: 50%; } #blocco0 { margin-left:-100px; margin-top:-100px } </style> </head> <body> <div id="blocco0">Blocco numero zero</div> </body> </html> |
| risultato pagina web |
|
Per centrare solo orizzontalmente, imposta solo la proprietà margin-left:
#blocco0 { margin-left:-100px; }