Visto che — statistiche alla mano — i miei post sui CSS sembrano essere apprezzati, continuo su questa strada.
Vediamo oggi come centrare gli elementi delle nostre pagine, in particolare i div.
Com’è noto, per centrare un testo rispetto al suo contenitore, è sufficiente un semplice text-align:center. Cosa che non funziona con i div.
Bisogna infatti sapere che gli elementi di cui è costituita una pagina (x)html (il box model) sono di due tipi: inline e block-level. Di questa differenza parleremo approfonditamente nei futuri post.
Per ora ci basti dire che sono elementi inline quelli che non vanno a capo e possono essere inseriti nel normale flusso della pagina: <a>, <span>, <b>, <i>…
Gli elementi di block-level, invece, sono quelli che alterano il flusso e vanno a capo, occupando tutta la larghezza della pagina: <div>, <p>, <h1>, <ul>…
Per centrare un elemento inline, come detto sopra, usiamo la proprietà text-align. Invece, nel caso volessimo centrare un elemento block-level — un div dentro un altro div, ad esempio — è necessario usare stratagemmi diversi.
Supponiamo di avere il seguente listato html:
1 2 3 | <div id="container"> <div id="center">DIV centrato</div> </div> |
Un primo modo per centrare il nostro div #center è applicare i seguenti stili (ho aggiunto colori e dimensioni ai div, per visualizzarli meglio nel nostro esempio):
4 5 6 7 8 9 10 11 12 13 14 | #container{ width:600px; height:600px; background:red; } #center{ width:300px; background:yellow; margin:0 auto; } |
In sostanza, l’attributo magico è margin:0 auto che imposta un margine automatico a sinistra e a destra.
Il secondo modo per centrare un div all’interno dell’altro div, è usare i posizionamenti assoluti:
15 16 17 18 19 20 21 22 23 24 25 26 27 28 | #container{ width:600px; height:600px; background:red; position:relative; } #center{ width:300px; background:yellow; position:absolute; left:50%; margin-left:-150px; } |
Impostiamo una posizione relativa per il div esterno, in modo che la posizione assoluta del div da centrare sia riferita al #container e non al body. Quindi, spostiamo il nostro div verso destra del 50% e riposizioniamolo verso sinistra di esattamente la metà della larghezza. In questo caso la width è di 300px, quindi impostiamo il margine sinistro di -150px. Et voilà, anche qua abbiamo centrato il div.
Lo stesso metodo possiamo usarlo per centrare sia orizzontalmente che verticalmente un div dentro un altro div. Così:
32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | #container{ width:600px; height:600px; background:red; position:relative; } #center{ width:300px; height:200px; background:yellow; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top:-100px; } |
Come prima, ma stavolta per l’altezza: lo spostiamo giù del 50% e lo riportiamo su, con un margine negativo di metà dell’altezza.
C’è da notare che entrambi i metodi funzionano solo se fissiamo le dimensioni del div #center, altrimenti questo — essendo un elemento block-level — si estenderà per tutta la larghezza del suo contenitore.
..e se non avessimo una dimensione esatta del div “center” ? se questo fosse diverso ogni volta che viene richiamato o creato ad esempio da un php che lo genera e include al suo interno un’immagine…
Conoscete un modo per centrare un div che non ha larghezza fissa?
Mi hai chiarito le idee. sto iniziando ora a montare siti…
Già conoscevo il metodo ma il sistema dell’absolute + margin non mi era venuta in mente! GRAZIE!
Ti volevo sentitamente ringraziare : grazie a te sono uscito fuori da un’impiccio in CSS durato 2 giorni !
E’ un piacere!
Ciao,
funziona con il primo metodo.
Ma il mio container ha larghezza in percentuale.
#center {
width: 400px;
margin: 0 auto;
}
se inserisco larghezza in px funziona, con la percentuale no, posso risolvere?
Ciao
Grande Giamp!
Ciao Ghido,
ho provato l’esempio con allineamento centrale e verticale, il verticale funziona solo con questo doctype:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
se meti gli altri no
per esempio:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
Ciao. Ho tolto l’esempio del div centrato dentro al body che proprio non funzionava e l’ho corretto mettendo l’esempio del div centrato in orizzontale ed in verticale, rispetto ad un altro div.
L’ho testato con tutti i doctype e funziona.
Caro Ghido, ho copiato il codice paro paro… ma con IE7 nessun problema mentre con FF3 salta tutto.
Non è che l’hai provato su FF2?
Ciao, Ale! Bè, il post ha quasi un anno… quindi sì: l’ho provato su FF2.
Appena ho tempo provo a vedere cosa succede sul 3
[Comment ID #535 Will Be Quoted Here]
Ti assicuro che il primo metodo funziona perfettamente con IE sia 7 che 6: il div container di questo blog stesso, ad esempio, è centrato nella pagina proprio in quel modo.
Ricordati che devi fissare una width, altrimenti non funzionerà.
Utile, però per internet explorer si hanno alcuni problemi.
Il primo caso non funziona, il secondo caso invece se dobbiamo centrare un div principale, per esempio un div che conterrà tutto, se noi restringiamo la finestra del browser il div resta centrato e quindi bordo destro e bordo sinistro vengono tagliati.
Hai qualche soluzione a questo problema perchè ancora non ho trovato un buon metodo per sostituire margin: 0 auto; che su firefox, opera ed altri browser va alla grande ma su ie da problemi.
[Comment ID #496 Will Be Quoted Here]
Lieto di esserti stato utile
interessante, mi serviva!