Posso usare il tag o align="center" per centrare un'immagine?

No. e l'attributo align su sono obsoleti in HTML5. I browser mostrano ancora per le pagine vecchie, ma align="center" su un'immagine la allinea in verticale nella riga, non in orizzontale. Usa il CSS.

Guida CSS interattiva: Centrare un'immagine

Q: Come centro un'immagine in HTML?

Metti text-align: center sull'elemento che la contiene, per esempio . Un'immagine è inline per impostazione predefinita, quindi si centra come una parola di testo.

Q: Come centro un'immagine con margin auto?

Prima rendi l'immagine un blocco: img { display: block; margin: 0 auto; }. I margini automatici non centrano gli elementi inline, e un'immagine resta inline finché non lo cambi.

La risposta rapida: text-align sul genitore

Un <img> è un elemento inline: sta in una riga di testo come una parola. Quindi lo centri come centri il testo, con text-align: center sul genitore:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center an image</title>
  <style>
    .wrap { text-align: center; border: 1px dashed #9ca3af; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap" id="wrap">
    <img id="img" width="160" height="100" alt="Blue rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%232563eb'/%3E%3C/svg%3E">
  </div>
</body>
</html>

Lo stile va sul div, non sull'immagine. Mettere text-align: center sull'<img> stesso non fa nulla, perché l'immagine non contiene testo da allineare.

Metodo 2: display block e margin auto

Se preferisci dare stile all'immagine stessa, trasformala in un blocco e dalle margini laterali automatici. Lo spazio libero sui due lati viene diviso in parti uguali:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and margin auto</title>
  <style>
    .centered {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      height: auto;
    }
    .frame { border: 1px dashed #9ca3af; padding: 8px 0; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="frame">
    <img class="centered" id="img" width="160" height="100" alt="Green rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%2316a34a'/%3E%3C/svg%3E">
  </div>
  <div class="frame">
    <img style="margin: 0 auto;" id="inline" width="160" height="100" alt="Gray rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%239ca3af'/%3E%3C/svg%3E">
  </div>
</body>
</html>

L'immagine grigia ha margin: 0 auto ma resta all'inizio della riga: i margini automatici non hanno effetto su un elemento inline. Il pezzo mancante è display: block. max-width: 100% con height: auto evita che l'immagine esca da uno schermo stretto e ne conserva le proporzioni.

Metodo 3: flexbox o grid, anche in verticale

Per centrare un'immagine in entrambe le direzioni dentro un box, dai un'altezza al box e centrane il contenuto con grid o flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center vertically</title>
  <style>
    .box {
      display: grid;
      place-items: center;
      height: 220px;
      background: #f3f4f6;
      border: 1px solid #d1d5db;
    }
  </style>
</head>
<body>
  <div class="box" id="box">
    <img id="img" width="120" height="120" alt="Amber circle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='60' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

L'equivalente con flexbox è display: flex; justify-content: center; align-items: center;. In entrambi i casi il box deve avere un'altezza maggiore dell'immagine, altrimenti non c'è spazio in cui centrare. Gli stessi metodi centrano qualsiasi elemento; la pagina su come centrare un div li mette tutti a confronto.

Centrare un'immagine con didascalia

Una foto con didascalia va in un <figure>. Centra il contenuto della figura, e immagine e didascalia si allineano insieme:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    figure {
      margin: 0;
      text-align: center;
    }
    figure img { max-width: 100%; height: auto; }
    figcaption { font-size: 14px; color: #4b5563; margin-top: 6px; }
  </style>
</head>
<body>
  <figure id="fig">
    <img id="img" width="200" height="120" alt="A mountain drawing"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect width='200' height='120' fill='%23bfdbfe'/%3E%3Cpath d='M0 120L70 40L140 120Z' fill='%2316a34a'/%3E%3Cpath d='M80 120L150 55L200 100V120Z' fill='%2315803d'/%3E%3C/svg%3E">
    <figcaption id="cap">Figure 1. A centered image with its caption.</figcaption>
  </figure>
</body>
</html>

Più immagini in una riga centrata

Una riga di loghi o miniature è un lavoro da flexbox. justify-content: center centra il gruppo, gap lo distanzia e flex-wrap lo fa andare a capo sugli schermi piccoli restando centrato:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered row</title>
  <style>
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px dashed #9ca3af;
    }
  </style>
</head>
<body>
  <div class="row" id="row">
    <img width="80" height="50" alt="Logo one" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%232563eb'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo two" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%2316a34a'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo three" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

Quale metodo usare

Situazione	Usa
Un'immagine in un paragrafo o in un blocco semplice	`text-align: center` sul genitore
Puoi dare stile solo all'immagine	`display: block; margin: 0 auto;`
Centrare in entrambe le direzioni dentro un box	Grid `place-items: center` (o flexbox) sul box
Una riga di immagini	Flexbox con `justify-content: center`
Un'immagine con didascalia	`<figure>` con `text-align: center`
Un'immagine di sfondo, non un contenuto	`background-position: center`, vedi background-image

I vecchi metodi, e perché no

Li troverai ancora nei tutorial datati:

<!-- obsolete: do not use -->
<center><img src="logo.png" alt="Logo"></center>
<img src="logo.png" alt="Logo" align="center">

<center> e l'attributo align sono stati rimossi dall'HTML. I browser mostrano ancora <center> per compatibilità con il passato, e align="center" su un'immagine non la centra nemmeno in orizzontale: i browser lo trattano come un allineamento verticale nella riga. Usa uno dei metodi CSS qui sopra.

Errori comuni

text-align: center sull'<img>. Mettilo sul genitore.
margin: 0 auto su un'immagine inline. Aggiungi display: block.
Centraggio verticale senza altezza sul genitore. Il box si restringe all'immagine e non resta spazio in cui centrare.
float: center. Questo valore non esiste. I float vanno solo su un lato.
Dimenticare alt. Anche un'immagine centrata ha bisogno di un testo alternativo; usa alt="" solo per le immagini puramente decorative.
Un'immagine deformata. Impostare in CSS sia width sia height con valori di proporzioni diverse la distorce. Impostane uno e usa height: auto, oppure aggiungi object-fit: cover.

Domande frequenti

Come centro un'immagine in HTML?

Metti text-align: center sull'elemento che la contiene, per esempio <p style="text-align: center;"><img src="logo.png" alt="Logo"></p>. Un'immagine è inline per impostazione predefinita, quindi si centra come una parola di testo.

Come centro un'immagine con margin auto?

Prima rendi l'immagine un blocco: img { display: block; margin: 0 auto; }. I margini automatici non centrano gli elementi inline, e un'immagine resta inline finché non lo cambi.

Come centro un'immagine in verticale e in orizzontale?

Trasforma il suo contenitore in una griglia (o in un flexbox) con un'altezza: .box { display: grid; place-items: center; height: 300px; }. L'immagine si posiziona così al centro del box.

Posso usare il tag <center> o align="center" per centrare un'immagine?

No. <center> e l'attributo align su <img> sono obsoleti in HTML5. I browser mostrano ancora <center> per le pagine vecchie, ma align="center" su un'immagine la allinea in verticale nella riga, non in orizzontale. Usa il CSS.

Perché c'è un piccolo spazio sotto la mia immagine centrata?

Un'immagine inline poggia sulla linea di base del testo e lascia sotto di sé lo spazio per le parti discendenti delle lettere. Imposta display: block sull'immagine, oppure vertical-align: middle, e lo spazio sparisce.

Concetti correlati