- Come centrare orizzontalmente un'immagine in Div?
- Proprietà del margine
- Modulo flessibile
- Layout vista griglia
- Attributo posizione
Come centrare orizzontalmente un'immagine in Div?
Lo sviluppatore può utilizzare la proprietà margin, il modulo Flexbox, il layout Grid View e l'attributo Position per centrare orizzontalmente un'immagine nel div. Segui la guida qui sotto per centrare allineare l'immagine orizzontalmente nel tag div.
Supponiamo che ci sia un div in cui l'immagine è posizionata in questo modo nel file HTML:
< div classe = 'radice' >
< imm src = '../libro.jpg' altezza = 'cinquanta%' larghezza = 'cinquanta%' classe = 'Immagine' >
< / div >
L'immagine ottiene larghezza e altezza del 50% e una classe di 'immagine'.
Utilizzo della proprietà del margine
Gli utenti possono aggiungere spazio attorno agli elementi HTML utilizzando la proprietà margin. Assegna un margine in base allo spazio disponibile dopo aver ridimensionato lo schermo della finestra. Ad esempio, imposta margin-left e right su auto e la proprietà display è impostata su block:
imm {
blocco di visualizzazione;
margine sinistro: auto;
margine destro: auto;
}
Dopo aver eseguito l'esempio precedente, la pagina Web si presenta così:
L'output sopra ha mostrato che l'immagine è ora al centro.
Utilizzo del modulo Flexbox
IL ' flexbox ” è un modulo che contiene un insieme completo di proprietà. Nel nostro caso, seleziona la classe dell'elemento root e usa flex come valore della proprietà display. Imposta centro come valore per ' giustificare il contenuto ' E ' align-elementi ' proprietà:
.radice {display: flessibile;
giustificare- contenuto : centro;
align-items: centro;
sfondo- colore : blu;
}
La pagina web si presenta così, dopo aver eseguito il codice:
L'output sopra mostra che l'immagine viene visualizzata al centro del div con un colore di sfondo impostato su 'blu'.
Utilizzo del modulo Layout vista griglia
Il layout della vista griglia ha 12 colonne e la larghezza totale è impostata su 100% e posiziona ogni elemento in una posizione specifica sulla pagina Web:
.radice {visualizzazione: griglia;
luogo-item: centro;
}
Nello snippet di codice precedente, il valore 'grid' è assegnato alla proprietà display. Mentre 'place-item' è usato come scorciatoia per le proprietà 'justify-content' e 'align-items':
L'output autentica che l'immagine si trova al centro del div utilizzando il metodo della griglia:
Utilizzo dell'attributo di posizione
Impostando la posizione della classe radice su valore relativo e la classe immagine su valore assoluto. L'immagine può essere visualizzata al centro del div:
.radice {posizione: relativa;
}
.Immagine {
larghezza : 700 pixel;
altezza : 500px;
posizione: assoluta;
Sinistra: cinquanta %;
trasformare: tradurreX ( - cinquanta % ) ;
}
L'immagine viene spostata a sinistra di '50%' e quindi trasformata di nuovo in '-50%' sull'asse X. Visualizza l'immagine al centro del div in orizzontale:
È così che l'immagine può essere centrata orizzontalmente nel div.
Conclusione
Per impostare orizzontalmente l'immagine in un elemento div, utilizzare il ' margine ”, “ modulo flessibile ”, “ layout della griglia ' E ' posizione ' proprietà. IL ' margine ” la proprietà di sinistra e destra è impostata su auto. Il 'modulo flessibile' e il 'Layout griglia' impostano il display rispettivamente su flessibile e griglia e utilizzano il ' posizionare l'oggetto “ proprietà per centrare l'immagine. La proprietà position imposta il valore relativo alla classe root e assoluto alla classe image e utilizza le proprietà “left” e “transform”. Questo blog ha dimostrato con successo come centrare orizzontalmente le immagini in un div.