Come Centrare un'Immagine in HTML con CSS

Un web developer usa HTML per definire la funzione semantica di ogni elemento (paragrafo, titolo, lista). Da HTML 4, i CSS (Fogli di Stile) separano l'aspetto visivo dalla struttura. Una pagina può avere stili CSS diversi per dispositivi diversi (mobile, desktop), cambiando l'aspetto senza toccare l'HTML. Usa le proprietà CSS per centrare un'immagine.

Passo 1: Inserire l'Immagine nell'HTML

Posiziona il tag <img> nel file HTML dove vuoi l'immagine, tra i tag <body> e dopo gli <h1>. Esempio:

<body>
<h1 style="text-align:center;">Testo centrato</h1>
<img src="foto.jpg" alt="Descrizione immagine" width="270" height="50" />
</body>

Definisce un'immagine 270×50 px come primo elemento dopo il titolo.

Passo 2: Usare margin:auto

L'attributo CSS margin definisce lo spazio attorno agli elementi. Il valore auto dice al browser di calcolare automaticamente lo spazio. Esempio:

<img src="foto.jpg" alt="Descrizione" width="170" height="50" style="margin:auto;" />

Passo 3: Usare display:block

La proprietà display definisce come l'elemento viene visualizzato. block pone l'elemento su una riga propria con spazio sopra e sotto. Combinato:

<img src="foto.jpg" alt="Descrizione" width="170" height="50" style="margin:auto;display:block;" />

L'aggiunta di display:block; centra l'immagine su una riga dedicata.

Passo 4: Verifica Cross-Browser

Visualizza la pagina in diversi browser per verificare il centraggio corretto.

💡 Consiglio

Includi sempre la descrizione nell'attributo alt. Migliora l'accessibilità per ipovedenti e la conformità agli standard. <img src="foto.jpg" alt="Descrizione dell'immagine" />