Pillole CSS: come centrare un elemento?
Spesso durante lo sviluppo di siti web, ci troviamo a dover risolvere tanti piccoli problemi la cui soluzione, per quanto semplice, può richiedere molto tempo in termini di ricerca e implementazione.
Per questo ho pensato di inaugurare una nuova rubrica, dedicata proprio ai “piccoli grandi problemi” che i web designers incontrano tutti i giorni sul loro cammino. Questa settimana vedremo come centrare correttamente un elemento all’interno del suo contenitore.
Problema
Vuoi centrare un elemento rispetto al suo elemento genitore.
Soluzione
Utilizza il valore “auto” per i margini destro e sinistro, e imposta una larghezza per l’elemento
#centrato {
margin-left:auto;
margin-right:auto;
width:800px;
}
Spiegazione e approfondimenti sul valore “auto”
I CSS prevedono sette proprietà per modificare la formattazione orizzontale di un elemento: margin-left, border-left, padding-left, width, padding-right, border-right, margin-right. La loro somma corrisponde allo spazio orizzontale complessivo che un elemento occupa nella pagina.
Di queste sette, tre possono accettare oltre ai valori regolari (percentuali, pixel, punti, em, ecc) il valore “auto”: la width dell’elemento, il margine sinistro e il margine destro.
Detto questo, ci sono quattro combinazioni possibili:
- Due proprietà con un valore auto, l’altra con un valore fissato.
- Una proprietà con un valore auto, le altre due con un valore fissato.
- Tutte e tre le proprietà con un valore fissato.
- Tutte e tre le proprietà con un valore auto.
Il primo caso, due proprietà con un valore auto, l’altra con un valore fissato è quello che ci interessa: quando imposti i due margini ad un valore auto, e la larghezza dell’elemento ad un valore fissato, il browser assegna ai margini una lunghezza uguale, centrando così l’elemento all’interno del suo genitore, come puoi vedere in questo esempio:
... <body> <div id="#centrato"> <p>Lorem ipsum....</p> </div> </body> </html>
#centrato {
margin-left:auto;
margin-right:auto;
width:800px;
}
Quando invece imposti il valore “auto” ad un margine ed alla larghezza dell’elemento, fissando l’altro margine, il margine impostato come auto viene ridotto a zero, assegnando così la massima larghezza possibile all’elemento, come puoi vedere nell’esempio:
#centrato {
margin-left:200px;
margin-right:auto;
width:auto;
}
Nel secondo caso, ovvero quando due delle proprietà sopracitate hanno un valore fissato, e l’altra un valore auto, il browser calcola automaticamente la lunghezza di quest’ultima, necessaria per rispettare i valori impostati. Ad esempio, se un elemento deve avere una larghezza di 960px e un margine sinistro di 160px, il browser calcolerà automaticamente la lunghezza per il margine destro.
#box {
margin-left:160px;
margin-right:auto; /* margine calcolato automaticamente
per soddisfare gli altri due valori */
width:960px;
}
Questo è il comportamento predefinito per tutti i browser, infatti rimuovendo la riga relativa al margine destro, la visualizzazione resterà invariato, come puoi vedere nell’esempio.
Nel terzo caso, ovvero quando tutte e tre le proprietà hanno un valore impostato, il browser forzerà il margine destro ad un valore di auto, riconducendo quindi al caso precedente:
#box {
margin-left:160px;
margin-right:160px; /* forzato ad auto dal browser */
width:960px;
}
Nel quarto caso, impostando ad auto larghezza e margini, il browser assegnerà la larghezza massima all’elemento: in altre parole i margini destro e sinistro vengono azzerati.
#box {
margin-left:auto; /* forzato a zero */
margin-right:auto; /* forzato a zero */
width:auto;
}
Appendice: ho applicato questo metodo ad un’immagine ma non funziona, perché?
I margini automatici si applicano solamente ad elementi di blocco, ovvero tutti quegli elementi come paragrafi, “div”, liste, che creano un riquadro che occupa tutta una riga, senza la possibilità di aggiungere elementi a lato.
Le immagini, gli “span”, “em”, “strong” sono invece elementi inline: tali elementi non creano un riquadro a parte, e devono essere inclusi in elementi di blocco. Essendo una parte del flusso del testo, i margini “laterali” degli elementi inline vengono ignorati dai browser. Dunque per far sì che le immagini vengano centrate, dobbiamo impostare la proprietà “display” al valore “block”, come in questo esempio.
img { display:block; }
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
9 commenti
Trackback e pingback
-
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by jubstuff: RT @YIW Pillole CSS: come centrare ...
Molto utile questa rubrica. ;)
Pur conoscendo la soluzione, a volte la dimentico ed entro in una profonda spirale di dubbi sul come si faceva questo o quello.
(E’ un po’ il motivo per cui anche io ho aperto un blog dove annotare tutte le pilloline, poi ha preso una cattiva strada…) ;)
Ciao Francesca,
è un problema che ho anche io: sono pieno di fogliettini, appunti, file, note online di come ho fatto a fare questo o quello e non riesco mai a organizzarle. :D
Spero che questa rubrica serva a tutti :)
Grazie per essere passata ;)
Ti faccio anche io i complimenti, ottimo articolo ed ottima rubrica!
Mi ha fatto bene ripassare… mi sono reso conto che avevo preso la cattiva abitudine di “flottare” i div anche quando potevo farne a meno.
(Ogni volta che cerco di creare una sorta di archivio di codice mi perdo i pezzi e faccio prima ad andare a controllare su vecchi lavori … vedo che è un problema diffuso :D )
Grazie SdV, anche io spesso cedo alla “strada comoda”, ma ogni tanto una riorganizzata ci vuole; non si può andare a scavare tra i migliaia di file di vecchi lavori, magari davanti alla persona interessata, “Ma ce l’avevo proprio qui” :D
Io volevo semplicemente fare i complimenti per la chiarezza della spiegazione (come per tutti gli altri articoli)! Continuate così ragazzi!
Grazie Davide,
è davvero importante per noi sapere di stare facendo un buon lavoro per i nostri lettori ;)
Ciao volevo solo segnalare questo link:
Centrare oggetti trad. IT
un utile documento del w3c che contiene qualche altra tip rispetto a quelle da te esposte.
Complimenti comunque!
Grazie mille della segnalazione, Elmook, e benvenuto su YIW ;)