Sebbene non sia necessariamente difficile, la centratura delle immagini sulle tue pagine web potrebbe essere più complicata di quanto pensi. Il motivo principale è che il tag è un elemento in linea, quindi si comporta in modo diverso rispetto agli elementi a livello di blocco. Alcuni approcci usano l'HTML; altri usano il CSS, e alcuni sono considerati più "corretti" di altri in quanto non sono deprecati. Per procedere, seleziona un metodo dall'elenco seguente e segui le istruzioni.

Per il supporto in HTML5, è necessario utilizzare un attributo di stile con il valore text-align: center all'interno di un elemento a livello di blocco; come un tag.

Esempio di codice HTML

Suggerimento: l'aggiunta di uno stile in linea come mostrato sopra deve essere eseguita una sola volta, se devi centrare più immagini dovresti usare il suggerimento qui sotto e creare una classe CSS per ridurre il codice ridondante e velocizzare la tua pagina web.

Esempio di centro dell'immagine utilizzando il codice sopra

Conversione in un elemento a livello di blocco

Un modo per centrare correttamente le immagini è definire il elemento come elemento a livello di blocco. Per fare ciò, aggiungi una regola alla testata della tua pagina (mostrata nel seguente esempio), o un file CSS esterno collegato.

Esempio di codice HTML

 .centerImage {text-align: center; blocco di visualizzazione; } 

Con questo codice, puoi applicare la classe centerImage a un tag senza doverlo annidare in un elemento a livello di blocco. Questo metodo funziona per più immagini.

Esempio di codice dell'immagine centrato

Usando i tag

Puoi centrare un'immagine racchiudendo il tag nella tag. Questa azione centra quella, e solo quella, immagine sulla pagina web. Va notato che questo metodo è deprecato in HTML5 e non funzionerà sempre in tutti i browser in futuro. Si consiglia di utilizzare questo metodo solo se nessuno degli altri suggerimenti sopra menzionati funziona dove si sta tentando di centrare un'immagine.

Esempio di codice HTML