CSS: Centra l’immagine

In questo articolo tipps+tricks, spieghiamo i modi più comuni per centrare un'immagine sia verticalmente che orizzontalmente usando diverse proprietà CSS. Potete leggere tutto quello che c'è da sapere qui sotto.

  • Come centrare un'immagine orizzontalmente
  • Come centrare un'immagine verticalmente

Come centrare un'immagine orizzontalmente in CSS

Abbiamo messo insieme tre modi per te per centrare l'immagine sulla tua pagina web usando i CSS:

  • Margine: Auto
  • Text Align
  • Display: Flex

Margine: Auto

Il primo modo per allineare un'immagine orizzontalmente è usare margin: auto. Questo imposta le proprietà left-margin e right-margin su automatico e aiuta la centratura. Tuttavia, questo non funziona automaticamente per le immagini, poiché questo è un elemento in linea. Con l'aiuto del comando display:block nel codice CSS, tuttavia, le immagini possono essere facilmente convertite in elementi di blocco. Dopo, anche l'allineamento automatico funziona.

Inoltre, devi anche definire una larghezza per l'immagine - che di conseguenza non è 100% - in modo che l'immagine possa allinearsi automaticamente sulla base dei margini sinistro e destro.