• Home
• Webmaster »
Tips Centrare-elemento

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;

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:

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:

Con flex-flow: row e solo align-items: center; viene fuori così: