CREARE SITI WEB in HTML e CSS > Usare un BLOCCO centrato come contenitore
Con il piccolo trucco appena visto potrai così avere un blocco/contenitore dove tener centrati gli oggetti ivi inseriti. Il contenitore dovrà essere opportunamente dimensionato!
Ad esempio potrai inserire i 5 blocchi costruiti precedentemente in un contenitore centrato delle dimensioni di 700px per 500px. Il codice da inserire tra il tag <body> è il seguente:
<body>
<div id="blocco0">
<div id="blocco1"><p>blocco numero 1 ...</p></div>
<div id="blocco2"><p>blocco numero 2 ...</p></div>
<div id="blocco3"><p>blocco numero 3 ...</p></div>
<div id="blocco4"><p>blocco numero 4 ...</p></div>
<div id="blocco5"><p>blocco numero 5 ...</p></div>
</div>
</body>
<div id="blocco0">
<div id="blocco1"><p>blocco numero 1 ...</p></div>
<div id="blocco2"><p>blocco numero 2 ...</p></div>
<div id="blocco3"><p>blocco numero 3 ...</p></div>
<div id="blocco4"><p>blocco numero 4 ...</p></div>
<div id="blocco5"><p>blocco numero 5 ...</p></div>
</div>
</body>
Il Foglio Stile da associare, inserito tra il tag <head> è invece il seguente:
<style type="text/css">
#blocco0 { background: olive; }
#blocco1 { background: red; }
#blocco2 { background: green; }
#blocco3 { background: blue; }
#blocco4 { background: pink; }
#blocco5 { background: yellow; }
#blocco0 {width:700px; height:500px;}
#blocco0 {position: absolute; left: 50%; }
#blocco0 {margin-left: -350px; }
#blocco1, #blocco2, #blocco3, #blocco4, #blocco5 { position: absolute; }
#blocco1, #blocco2, #blocco3, #blocco4, #blocco5 { overflow: auto; }
#blocco1, #blocco2, #blocco3, #blocco4, #blocco5 {width:200px; height:200px }
#blocco1 { top: 10px; left:10px ; }
#blocco2 { top: 10px; left:220px ; }
#blocco3 { top: 10px; left:430px ; }
#blocco4 { top: 220px; left:10px; }
#blocco5 { top: 220px; left:220px; }
p {margin:5px 10px 10px}
</style>
#blocco0 { background: olive; }
#blocco1 { background: red; }
#blocco2 { background: green; }
#blocco3 { background: blue; }
#blocco4 { background: pink; }
#blocco5 { background: yellow; }
#blocco0 {width:700px; height:500px;}
#blocco0 {position: absolute; left: 50%; }
#blocco0 {margin-left: -350px; }
#blocco1, #blocco2, #blocco3, #blocco4, #blocco5 { position: absolute; }
#blocco1, #blocco2, #blocco3, #blocco4, #blocco5 { overflow: auto; }
#blocco1, #blocco2, #blocco3, #blocco4, #blocco5 {width:200px; height:200px }
#blocco1 { top: 10px; left:10px ; }
#blocco2 { top: 10px; left:220px ; }
#blocco3 { top: 10px; left:430px ; }
#blocco4 { top: 220px; left:10px; }
#blocco5 { top: 220px; left:220px; }
p {margin:5px 10px 10px}
</style>
La dichiarazione {overflow: auto;} serve per limitare la lunghezza dei blocchi. Senza questa dichiarazione, il maggiore testo inserito aumenterà l'altezza del blocco; sovrapponendosi a quelli sottostanti.
La dichiarazione p {margin:5px 10px 10px} serve per dare un aspetto grafico migliore al contenuto. Senza questa dichiarazione, il testo risulterebbe appiccicato ai bordi.
Ed ecco il risultato finale:
Da notare che si è scelto di centrare il blocco0 solo in senso orizzontale.
Per centrarlo anche in senso verticale si deve aggiungere la dichiarazione:
#blocco0 { top: 50%; margin-top: -250px; }