Centrare un box a larghezza fissa
Oct 5th, 2006 by paolo
Un tempo per fare una pagina web con un box centrato di dimensione fissa o relativa, ci si appoggiava alle tabelle (elemento table), un po’ come per tutte le problematiche di impaginazione. Ora con i CSS le cose dovrebbero essere più semplici, ma non per questo immediate.
Il problema è quello di centrare tutto ciò che inseriamo direttamente all’interno dell’elemento body della pagina fissando un spazio di occupazione del contenuto e lasciando adattare i margini alle dimensioni del finestra di visualizzazione del browser.
La tecnica da utilizzare è quella di inserire un elemento div come primo ed unico figlio dell’elemento body e di inserire al suo interno il contenuto della nostra pagina web. In questo modo si va a creare un div che fa da wrapper al contenuto che vogliamo centrare e su di esso interverremo tramite i CSS.
In particolare, assumendo “wrapper” l’id associato al nostro elemento div introdotto, bisognerà introdurre nel CSS associato alla nostra pagina una definizione del tipo:
#wrapper {
width: 55em;
margin: 0 auto;
}
Tramite l’attributo width assegneremo la dimensione fissa che vogliamo dare al box mentre con l’attributo margin diamo l’indicazione della centratura.
Se poi si vuole essere sicuri che nulla turbi il risultato finale bisogna ritoccare anche gli stili dell’elemento body aggiungendo le seguenti definizioni:
body {
margin:0;
padding:0;
...
Un esempio di quanto detto lo si può vedere nella home del progetto phpGoogleSearch che ho recentemente realizzato.
