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.