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>