Come centrare le immagini con CSS

Stai cercando di centrare un'immagine usando CSS? I problemi di allineamento sono spesso fonte di frustrazione per i web designer. Fortunatamente, centrare un'immagine con CSS è davvero semplice e ti mostreremo come farlo in pochi passaggi.

Come per molte attività di web design, c'è più di un modo per farlo! Tratteremo tre metodi principali in questo articolo. Iniziamo!

1. Usa la proprietà margine

Impostazione del margine è uno dei modi più semplici per centrare orizzontalmente un'immagine usando CSS. I margini sono una componente fondamentale di il modello a scatola CSS.

Innanzitutto, dovrai trasformare l'elemento dell'immagine da inline a block. Gli elementi HTML a livello di blocco occupano l'intera larghezza del loro elemento padre e sono in grado di occupare l'intera larghezza di una pagina.

Trasformando un elemento immagine in un elemento blocco, puoi quindi manipolarne la posizione regolandone i margini orizzontali. Dovrai anche impostare una larghezza specifica per l'immagine, per determinare quanto spazio occupa l'immagine sulla pagina.

Qualunque sia la larghezza scelta, l'immagine dovrà avere margini sinistro e destro uguali. Puoi ottenerlo facilmente assegnando alla proprietà margin un valore di auto:

img.center {
 blocco di visualizzazione;
 margine sinistro: automatico;
 margine-destra: auto;
 larghezza: 800px;
}

2. Usa il layout Flexbox

Questo metodo richiede di inserire l'immagine in un elemento a livello di blocco, di solito a div:

Dopo averlo fatto, puoi aggiungere alcune proprietà per manipolarne l'aspetto. Utilizzerai due proprietà CSS.

Il primo è il Schermo proprietà con il suo valore impostato su flettere. Puoi anche usa flex per allineare gli elementi in HTML. La seconda proprietà che aggiungerai al tuo div è giustificare-contenuto, con il suo valore impostato su centro così:

centro div {
 display: flessibile;
 giustificare-contenuto: centro;
}

3. Usa l'elemento centrale deprecato

Le migliori pratiche Web ti incoraggiano a utilizzare CSS per lo stile e HTML per la semantica, quindi non dovresti usare questo metodo HTML. Il centro tag, che centra il contenuto orizzontalmente, è deprecato in HTML5.

Ma se devi, ecco come centrare un'immagine usando solo HTML. Avvolgi semplicemente il img tag in un tag centrale in questo modo:

Ecco come allineare le tue immagini in HTML

Ti abbiamo mostrato tre metodi diversi e facili da usare per centrare le tue immagini in un documento HTML. Provali tutti e scegli quello che funziona meglio per te. Evita il terzo metodo a meno che tu non abbia assolutamente scelta!

Una cosa da tenere a mente è che ci sono molti altri modi per centrare le immagini usando HTML e CSS. Un metodo comune che funziona sia per il testo che per le immagini inline è il allineamento del testo proprietà.

Come centrare l'allineamento del testo nella tua pagina Web con CSS

Leggi Avanti

Circa l'autore