Esistono diversi modi per centrare un’immagine in HTML all’interno di una pagina web (o del suo contenitore). Vediamo, di seguito, le diverse tecniche in modo da scegliere quella più adatta alle nostre esigenze.
Utilizzare il tag <center>
Il tag <center> è deprecato nelle nuove specifiche di HTML5, tuttavia è ancora ampiamente supportato da praticamente tutti i browser in circolazione. Se non vi interessa avere pagine web con codice validato e l’unica cosa che vi preme è vedere la vostra immagine centrata, non vi resta che racchiuderla all’interno di <center> e </center> in questo modo:
<center>
<img src="miafoto.jpg" alt="Mia foto">
</center>Utilizzare un tag contenitore
Un’altra semplice tecnica consiste nell’annidiare l’immagine che si desidera centrare orizzontalmente all’interno di un tag DIV cui assegnare uno specifico stile:
<div style="text-align: center">
<img src="miafoto.jpg" alt="Mia foto">
</div>La proprietà text-align di CSS sortirà l’effetto voluto in quanto le immagini sono elementi inline.
Utilizzare le proprietà margin-lef e margin-right di CSS
Un’altra tecnica molta utilizzata per centrare un’immagine lungo l’asse orizzontale consiste nell’agire mediante CSS attraverso la corretta valorizzazione dei margini destro e sinistro, in questo modo:
<img src="miafoto.jpg" alt="Mia foto" style="margin-left: auto; margin-right: auto">Come potete notare, in questo caso l’immagine non ha bisogno di essere annidiata all’interno di alcun contenitore in quanto l’effetto è ottenuto mediante una semplice regola di stile che prevede di impostare come "auto" il margine sinistro e destro.
Considerando quest’ultima la soluzione migliore, si consiglia di aggiungere al foglio di stile del proprio sito web una classe apposita da applicare qualora si renda necessaria la centratura di una immagine, ad esempio:
.img-centrata {
display: block;
margin-left: auto;
margin-right: auto;
}da applicare all’elemento HTML in questo modo:
<img src="miafoto.jpg" alt="Mia foto" class="img-centrata">Centrare un’immagine: la soluzione cross-browser
Seppur l’ultima soluzione proposta sia quella corretta, alcuni vecchi browser potrebbero non supportarla adeguatamente. Al fine di avere la certezza che la nostra immagine sia effettivamente centrata su qualsiasi device (compresi quelli obsoleti come Internet Explorer) la soluzione migliore appare questa.
Per prima cosa si aggiungano al foglio di stile le seguenti direttive:
.contenuto-centrato {
text-align: center;
}
.img-centrata {
display: block;
margin-left: auto;
margin-right: auto;
}E si utilizzi questo markup all’interno del sorgente HTML della pagina:
<div class="contenuto-centrato">
<img src="miafoto.jpg" alt="Mia foto" class="img-centrata">
</div>