Per visualizzare questo contenuto devi accettare di utilizzare i cookie.

MyDigitalia
il digitale usato seriamente

centrare un 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 è

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

icona di Blogger

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!

Per visualizzare questo contenuto devi accettare di utilizzare i cookie.