Fogli di Stile per il Web
suggerimenti & trucchi sui CSS

Centrare oggetti

Un compito comune per i CSS è centrare immagini o testo. Di fatto, ci sono tre tipi di centramento:

• Centrare righe di testo
• Centrare un blocco di testo o un'immagine
• Centrare un blocco o un'immagine verticalmente

Centrare righe di testo

Il più comune e (quindi) il più facile tipo di centramento è quello delle righe di testo in un paragrafo o in un titolo. Il CSS ha la proprietà 'text-align' per questo:

P { text-align: center }
H2 { text-align: center }

che rende ogni riga in un P o in un H2 centrata tra i suoi margini, come questo:

Centrare un blocco o immagine

Qualche volta non è il testo che ha bisogno di essere centrato, ma un blocco tutto intero. O, detto diversamente: vogliamo il margine destro e sinistro uguali. Il modo per fare ciò è impostare i margini ad 'auto'. Questo normalmente si fa con un blocco di ampiezza fissa, perchè se il blocco è estensibile, esso semplicemente invaderà tutto lo spazio a disposizione. Ecco un esempio:

P.blocktext {
 margin-left: auto;
 margin-right: auto;
 width: 6em
}
...
<P class="blocktext">This rather...

Questo è anche il modo di centrare un'immagine: farne un blocco di se stessa ed applicaregli le proprietà dei margini. Per esempio:

IMG.displayed {
 display: block;
 margin-left: auto;
 margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Centrare verticalmente

Il CSS di livello 2 non ha un aproprietà per centrare verticalmente. Ce ne sarà probabilmente una nel CSS livello 3. Ma perfino nel CSS" si può centrare un blocco verticalmente, combinando qualche proprietà. il trucco è specificare che il blocco esterno sia formattato come una cella di tabella, perchè il contenuto di una cella di tabella può essere centrato verticalmente.

L'esempio sotto centra un paragrafo dentro un blocco che ha una data altezza. Un esempio separato mostra un paragrafo che è centrato verticalmente nella finestra del browser, perchè è dentro un blocco posizionato assolutamente ed ha la stessa altezza della finestra.

DIV.container {
 min-height: 10em;
 display: table-cell;
 vertical-align: middle }
...
<DIV class="container">
 <P>This small paragraph...
</DIV>