Sebbene non sia necessariamente difficile, centrare le immagini sulle tue pagine Web potrebbe essere più coinvolto di quanto pensi. Il motivo principale è che il tag <img> è un elemento incorporato, quindi si comporta in modo diverso rispetto agli elementi a livello di blocco. Alcuni approcci utilizzano HTML; altri usano CSS, e alcuni sono considerati più "propri" di altri in quanto non sono deprecati. Per procedere, selezionare un metodo dall'elenco seguente e seguire le istruzioni.
Utilizzando l'attributo di stile
Per il supporto in HTML5, è necessario utilizzare un attributo di stile con il valore text-align: center inside of a block element element; come un tag <p> </p>.
Esempio di codice HTML
<p style = "text-align: center;"> <img src = "logo.gif" alt = "Logo"> </p>
Esempio di centro immagine usando il codice sopra
Conversione in un elemento a livello di blocco
Un modo per centrare correttamente le immagini è definire l'elemento <img> come elemento a livello di blocco. Per fare ciò, aggiungi una regola all'inizio della pagina (mostrata nell'esempio seguente) o un file CSS esterno collegato.
Esempio di codice HTML
<style type = "text / css"> .centerImage {text-align: center; blocco di visualizzazione; } </style>
Con questo codice, puoi applicare la classe centerImage a un tag <img> senza nidificarlo in un elemento a livello di blocco. Questo metodo funziona per più immagini.
Esempio di codice immagine centrato
<img src = "logo.gif" class = "centerImage" alt = "Logo CH" altezza = "120" larghezza = "350">
Utilizzo dei tag <center>
Puoi centrare un'immagine racchiudendo il tag <img> nei tag <center> </center>. 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 nel caso in cui si stia tentando di centrare un'immagine.
Esempio di codice HTML
<center> <img src = "logo.jpg" alt = "che immagine mostra" height = "150" width = "200"> </center>