Centrare una immagine in un elemento di blocco con i CSS

Esistono due metodi per posizionare centralmente una immagine in un elemento di blocco:

  1. Posizionando l'elemento IMG nel DIV attraverso il markup;
  2. Dichiarando, per il DIV, l'immagine come background attarverso i CSS.

Quale tecnica scegliere, dipende esclusivamente dalle nostre necessità. La prima parte di questo articolo riguarderà il posizionamento dell'immagine attraverso il tag img; nella seconda parte vedremo l'utilizzo dell'immagine come background del suo contenitore.

Condideriamo, solo a scopo dimostrativo, un box di 400X200px con un bordo rosso, pari ad 1px.

Centrare una immagine inline

Di seguito il codice CSS:

div.markup{ 
width:400px;
height:200px;
border:1px solid red; 
} 

ed il relativo codice HTML:

<div class="markup"> 
<img src="/path/bob.jpg" alt="descrizione immagine" /> 
</div> 

Le linee di codice appena scritte, posizioneranno l'immagine nell'angolo superiore sinistro del DIV.

Primo passaggio: spostamento dell'immagine

In questo primo passaggio vediamo cosa succede se spostiamo verso destra l'immagine assegnando una dimensione pari alla metà della sua larghezza; la stessa cosa faremo per quanto riguarda in verticale: sposteremo verso il basso, assegnando una dimensione pari alla metà della sua altezza.

div.markup{
position:relative;
width:400px; 
height:200px; 
border:1px solid red; 
}
div.markup img{ 
position:absolute;
left:50%;
top:50%; 
} 

Come si può notare, è stato scritto position:relative per il DIV, affinchè si possa posizionare l'immagine al suo interno, in maniera assoluta. Queste nuove regole CSS posizionano l'angolo superiore sinistro dell'immagine, al centro del DIV. Non credo sia questo l'effetto che vorremmo, bensì posizionare il centro dell'immagine al centro del DIV.

Secondo passaggio: centrare l'immagine - codice finale

Per concludere, vediamo cosa aggiungere al codice CSS per fare in modo che l'immagine sia contenuta all'interno del div usando i margini negativi. In pratica dobbiamo traslare il margine sinistro e superiore di una dimensione pari alla metà della larghezza e dell'altezza dell'immagine stessa. Vediamo il codice CSS:

div.markup{
position:relative;
width:400px; 
height:200px 
border:1px solid red;
}
div.markup img{ 
position:absolute;
left:50%; 
top:50%;
margin-left:-155px;
margin-top:-75px; 
} 

Nota: La larghezza dell'immagine è pari a 310px, questo significa che la sua metà è 155px; l'altezza è uguale a 150px, di conseguenza la sua metà è 75px.

Il risultato finale è la conseguenza del codice CSS aggiunto a quello precedente.

Svantaggi

Fin qui abbiamo visto come usare un tag img posto direttamente all'interno di un div. Vederemo ora come centrare un'immagine dichiarata come background attaverso i CSS. Useremo sempre un DIV di 400X200px, con bordo rosso di 1px, ed una immagine di 310X150px.

Centrare l'immagine usando le proprietà CSS background-image

Questo è il metodo più semplice e più flessibile per centrare un'immagine, ed è adatto per le immagini relative alla presentazione, al contrario di quelle usate come contenuto. Questo vuol dire che, con la tecnica che andremo a vedere adesso, se fosse disabilitato il CSS, non vedremmo più l'immagine nella pagina.

Il codice di markup contiene solo le proprietà per il posizionamento di background di una immagine. Ecco il codice CSS:

div.back-image{ 
width:400px; 
height:200px; 
border:1px solid red; 
background-image:url(path/bob.jpg);
background-repeat:no-repeat; 
background-position:center center; 
} 

e quello html:

<div class="back-image"></div>

Il codice che abbiamo appena scritto centra l'immagine all'interno del div.

Per concludere, e per rendere il codice più semplice, possiamo applicare la dichiarazione di shorthand per la proprietà di background e riscrivere il nostro CSS in questo modo:

div.back-image{ 
width:400px; 
height:200px; 
border:1px solid red; 
background:url(nomeImmagine.jpg) no-repeat center; 
} 

La specifiche CSS2.1, Sezione 14.2.1 recita:

Se viene assegnato un solo valore in percentuale o assegnata una dimensione, viene settata solo la posizione orizzontale e la posizione verticale sarà al 50%.

Ecco perchè è stato aggiunto soltanto il valore center alla proprietà background-position.

Riferimenti