centrare un elemento
vecchia maniera
orizzontalmente
Per un webmaster costituisce un problema centrare un elemento, tipo un blocco di testo. Il comando text-align:center infatti si limita a a definire la centratura di un paragrafo attorno all'esse centrale del paragrafo stesso, ma nulla ottiene riguardo alla -come dire?- equimarginalità del paragrafo rispetto ai bordi della pagina.
Può invece essere utile far sì che un blocco di testo, o una tabella, o una immagine, disti esattamente lo stessa sia dal margine sinistro sia da quello destro.
Il trucco è
- impostare una larghezza possibilmente fissa, o, se relativa, sensibilmente inferiore al 100%
- impostare sia il margin-left sia il margin-right sul valore “auto”
- visto? Questo elenco puntato è costruito così, come potete vedere dal sorgente.
verticalmente
Più raramente, può essere utile centrare anche verticalmente un dato oggetto. Come suggerisce il W3C si possono impostare i seguenti valori, riferiti all'elemento contenitore, trattandolo come una cella di una tabella:
display: table-cell;
vertical-align: middle;
paragrafo centrato verticalmente e orizzontalmente
Qualcuno propone un'altra via, più semplice. Usare la proprietà margin: auto, per centrare sia orizzontalmente sia verticalmente. Peccato che non funzioni (almeno in Opera, FF, Chrome)...
Un'immagine non viene centrata neanche orizzontalmente!
paragrafo centrato verticalmente e orizzontalmente
L'elemento è centrato solo orizzontalmente, ma non verticalmente.
il nuovo modo: flexbox
Si può usare flexbox per centrare un elemento sia verticalmente sia orizzontalmente:
centrato orizzontalmente!
centrato orizzontalmente e verticalmente!
Da notare che per allineare anche verticalmente un elemento, abbiamo dovuto usare, con flex-flow: column anche la centratura orizzontale: senza non funziona. Si veda l'esempio seguente:
(flex-flow: column; align-items: center; centrato orizzontalmente ma non verticalmente!
Con flex-flow: row e solo align-items: center; viene fuori così:
centrato verticalmente ma non orizzontalmente!