Articolo originale: https://www.freecodecamp.org/news/how-to-center-an-image-in-css/
Molti sviluppatori si trovano in difficoltà a lavorare con le immagini. Gestire la responsività e l'allineamento è particolarmente difficile, soprattutto centrare un'immagine al centro della pagina.
In questo post ti mostrerò alcuni dei modi più comuni per centrare un'immagine sia in verticale che in orizzontale, utilizzando diverse proprietà CSS.
Ecco uno schema interattivo su come centrare un'immagine in verticale e in orizzontale:
Ho analizzato le proprietà CSS Position e Display nel miei post precedenti. Se non hai familiarità con queste proprietà, ti consiglio di dar loro un'occhiata prima di leggere questo articolo.
Ecco una versione video:
Centrare un'Immagine Orizzontalmente
Iniziamo centrando un'immagine orizzontalmente utilizzando 3 differenti proprietà CSS.
Text-Align
Il primo modo per centrare un'immagine in orizzontale è usare la proprietà text-align
. Tuttavia, questo metodo funziona solo se l'immagine si trova all'interno di un contenitore a livello di blocco, come ad esempio un <div>
:
<style>
div {
text-align: center;
}
</style>
<div>
<img src="your-image.jpg">
</div>
Margin: Auto
Un altro modo per centrare un'immagine è utilizzare la proprietà margin: auto
(per il margine sinistro e il margine destro).
Tuttavia, il solo utilizzo di margin: auto
non funzionerà per le immagini. Se hai bisogno di utilizzare margin: auto
, è necessario utilizzare anche altre due proprietà.
La proprietà margin-auto non ha alcun effetto sugli elementi in linea. Poiché il tag <img>
è un'elemento in linea, abbiamo prima bisogno di convertirlo in un'elemento a livello di blocco:
img {
margin: auto;
display: block;
}
In secondo luogo, è necessario definire una larghezza. In questo modo, i margini destro e sinistro possono occupare il resto dello spazio vuoto e allinearsi automaticamente, il che funziona (a meno che non si dia una larghezza del 100%):
img {
width: 60%;
margin: auto;
display: block;
}
Display: Flex
Il terzo modo per centrare un'immagine in orizzontale è quello di usare display: flex
. Così come abbiamo usato la proprietà text-align
per un contenitore, usiamo ugualmente display: flex
per un contenitore.
Tuttavia, l'uso del solo display: flex
non è abbastanza. Il contenitore deve anche avere in aggiunta una proprietà chiamata justify-content
:
div {
display: flex;
justify-content: center;
}
img {
width: 60%;
}
La proprietà justify-content
funziona insieme con display: flex
, che possiamo utilizzare per centrare l'immagine in orizzontale.
Infine, la larghezza dell'immagine deve essere inferiore alla larghezza del contenitore, altrimenti occupa il 100% dello spazio e non è possibile centrarla.
Importante: la proprietà display: flex
non è supportata nelle vecchie versioni dei browser. Per maggiori informazioni guarda qui.
Centrare un'Immagine Verticalmente
Display: Flex
Per l'allineamento verticale, ancora una volta torna molto utile utilizzare display: flex
.
Consideriamo il caso in cui il nostro contenitore ha un'altezza di 800px, ma l'altezza dell'immagine è solo di 500px:
div {
display: flex;
justify-content: center;
height: 800px;
}
img {
width: 60%;
height: 500px;
}
In questo caso, l'aggiunta di una singola riga di codice al contenitore, align-items: center
, risolve il problema:
div {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
}
La proprietà align-items
può posizionare gli elementi verticalmente se usata assieme con display: flex
.
Position: Absolute & le Proprietà Transform
Un altro metodo per l'allineamento verticale è utilizzare le proprietà position
e transform
assieme. Quest'ultimo metodo è un po' complicato, quindi procediamo per gradi.
Passaggio 1: Definire Position Absolute
Per prima cosa, cambiamo il comportamento di posizionamento dell'immagine da static
a absolute
:
div {
height: 800px;
position: relative;
background: red;
}
img {
width: 80%;
position: absolute;
}
Inoltre, dovrebbe essere all'interno di un contenitore posizionato relativamente, quindi aggiungiamo position: relative
al suo contenitore div.
Passaggio 2: Definire le Proprietà Top & Left
In secondo luogo, definiamo le proprietà top e left dell'immagine e le impostiamo al 50%. Questo sposterà il punto di partenza (top-left) dell'immagine al centro del contenitore:
img {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
}
Passaggio 3: Definire la Proprietà Transform
Il secondo passaggio ha spostato l'immagine parzialmente al di fuori del suo contenitore. È quindi necessario riportarla all'interno.
La definizione di una proprietà transform
e l'aggiunta di un -50% ai suoi assi X e Y sono sufficienti:
img {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Esistono altri modi per centrare le immagini in orizzontale e in verticale, ma ho spiegato quelli più comuni. Spero che questo post ti abbia aiutato a capire come allineare le immagini al centro della pagina.
Se vuoi saperne di più sullo sviluppo web, visita il mio Canale Youtube.
Grazie per la lettura!