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:

  1. Due proprietà con un valore auto, l’altra con un valore fissato.
  2. Una proprietà con un valore auto, le altre due con un valore fissato.
  3. Tutte e tre le proprietà con un valore fissato.
  4. 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; }
Tag: ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

13 commenti

Trackback e pingback

  1. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by jubstuff: RT @YIW Pillole CSS: come…