Come cenare un'immagine in orizzontale in bootstrap?

Durante lo sviluppo di qualsiasi applicazione, le immagini svolgono un ruolo vitale nel migliorare la sua rappresentazione visiva. Tuttavia, queste immagini devono avere un layout e allineamento adeguati. Per allineare le immagini, il "img-fluid","float-sinistra", E "Float-destra"Le lezioni possono essere utilizzate. Più specificamente, per centrare allineare l'immagine, il "centro di testo" e il "MX-Auto D-Block"Le lezioni sono utilizzate.

Questo articolo spiegherà come centrare un'immagine in orizzontale in bootstrap.

Prerequisito: aggiungi un'immagine

In HTML, aggiungi un'immagine usando ""Tag seguendo le istruzioni fornite:

• > Aggiungi un “"Elemento.
• All'interno di questo tag "", aggiungi un'immagine usando "" elemento con gli attributi "src", "larghezza" e "alt".
• IL "src"Imposta il percorso dell'immagine.
• IL "larghezza"Regola la dimensione dell'immagine.
• IL "Al"Specifica il testo alternativo nel caso in cui l'immagine non possa caricare.

Html

Produzione

Come centrarti un'immagine in orizzontale in bootstrap usando la classe "text-center"?

Il bootstrap "centro di testo"Class Center allinea le immagini. Questa classe ha un CSS predefinito "allineamento"Proprietà con il valore"centro"Ciò aiuta a impostare l'allineamento centrale di un'immagine orizzontale.

Esempio

Assegna il "centro di testo"Classe per il genitore""Elemento come mostrato qui:

Produzione

Come centrarti un'immagine in orizzontale in bootstrap usando la classe "mx-auto d-block"?

IL "MX-Auto"In combinazione con il"D-blocco"Classe, allinea l'immagine al centro. Il "MX-Auto" è il CSS "margine"Proprietà con il valore"auto", E la proprietà" d-block "è il CSS"Schermo"Proprietà con il valore"bloccare".

Esempio

Implettiamo le classi "MX-Auto" e "D-Block" all'elemento "" e vediamo l'effetto:

Produzione

In questo modo, puoi centrare un'immagine in orizzontale in bootstrap.

Conclusione

Per centrare un'immagine in orizzontale in bootstrap, prima, crea un file HTML e aggiungi un'immagine usando ""Tag. Assegnagli gli attributi richiesti, come "src","Al","larghezza"E altro. Aggiungi il "centro di testo"Classe per l'elemento genitore dell'immagine per regolare l'allineamento centrale dell'immagine. IL "MX-Auto"Classe, in combinazione con il"D-blocco"Classe, può anche essere utilizzato per questo scopo. Questo articolo ha spiegato come centrare un'immagine in orizzontale usando bootstrap.