Centrare il layout della pagina usando i CSS

Può risultare utile centrare il layout di una pagina, di un'immagine o di un qualsiasi altro elemento indipendentemente dalla risoluzione usata o dalla grandezza della finestra del browser.

Per questo esempio useremo un elemento div come container del nostro layout, al quale applicheremo una classe che per comodità chiameremo centrato.

Vediamo subito un sorgente HTML completo dell'esempio:

<html>
  <head>
    <!-- Qui l'header della pagina HTML -->
  </head>
  <body>
    <div id="container" class="centrato">
      <!-- Il layout della nostra pagina -->
    </div>
  </body>
</html>

Ora vedremo come scrivere il file style.css per ottenere la centratura del layout:

div#container {
  width:780px; // Diamo una dimensione fissa al container
}
.centrato {
  // Impostiamo il margine superiore ed inferiore a 0
  // e in auto i margini laterali
  margin:0 auto;
}

E il gioco è fatto! Semplice, no?

Qualcuno potrebbe invece chiedersi perché siano state usate due regole differenti e non sia stata creata un'unica regola che contenesse tutte le informazioni: domanda più che legittima.

Quando scriviamo il CSS per la formattazione dei nostri layout, dobbiamo sempre cercare di rendere il file leggero, riutilizzando (là dove è possibile) le regole già inserite.
La regola div#container è riferita all'intero corpo del layout (infatti difficilmente altri elementi saranno grandi quanto il layout stesso), mentre la classe .centrato può essere utilizzata non solo per il container ma, ad esempio, per centrare un'immagine o un div interno alla pagina.

E' vero che la regola dentro la classe .centrato poteva essere scritta all'interno di div#container ma se dovessimo centrare altri elementi, ci toccherebbe riscriverla altre volte rendendo così il file.css molto più pesante e complesso da leggere.

Inserisci un commento:


Il contenuto di questo campo è tenuto riservato e non verrà reso pubblico.

Condividi
Del.icio.us Digg Furl Google Ask
Yahoo! Segnalo Technorati Windows Live Facebook
Smarking Slashdot Taggly Ma.gnolia co.mments

Se ti piace questo articolo, puoi collegarlo al tuo sito copiando il seguente codice HTML nelle tue pagine.

Acquista libri di informatica

Acquista qui il tuo software

Ultimi commenti