Comment centrer une image horizontalement en bootstrap?

Tout en développant n'importe quelle application, les images jouent un rôle vital dans l'amélioration de sa représentation visuelle. Cependant, ces images doivent avoir une disposition et un alignement appropriés. Pour aligner les images, le «IMG-fluide","flotteur", et "Flotter à droite»Les classes peuvent être utilisées. Plus précisément, pour aligner l'image, le «centre de texte" et le "MX-AUTO D-BLOCK«Les cours sont utilisés.

Cet article expliquera comment centrer une image horizontalement en bootstrap.

Préalable: ajoutez une image

Dans HTML, ajoutez une image en utilisant le «”Tag en suivant les instructions données:

• > Ajouter un "" élément.
• Dans cette balise «», ajoutez une image en utilisant le «" élément avec les attributs «src», «largeur» et «alt».
• Le "SRC»Définit le chemin d'image.
• Le "largeur»Ajuste la taille de l'image.
• Le "alt»Spécifie le texte alternatif au cas où l'image ne pourrait pas charger.

Html

Sortir

Comment centrer une image horizontalement dans Bootstrap en utilisant la classe «Text-centre»?

Le bootstrap "centre de texte»Class Center aligne les images. Cette classe a un CSS prédéfini "alignement de texte«Propriété avec la valeur»centre"Cela aide à définir l'alignement central d'une image horizontalement.

Exemple

Attribuez le «centre de texte"Classe au parent"»Élément comme indiqué ici:

Sortir

Comment centrer une image horizontalement dans Bootstrap en utilisant la classe «MX-Auto D-Block»?

Le "MX-AUTO"En combinaison avec le"bloc D»Classe, aligne l'image au centre. Le «MX-Auto» est le CSS "marge«Propriété avec la valeur»auto», Et la propriété« d-bloc »est le CSS«afficher«Propriété avec la valeur»bloc".

Exemple

Implémentons les classes «MX-Auto» et «D-Block» à l'élément «» et voyons l'effet:

Sortir

De cette façon, vous pouvez centrer une image horizontalement en bootstrap.

Conclusion

Pour centrer une image horizontalement en bootstrap, créez d'abord un fichier HTML et ajoutez-y une image en utilisant le "" étiqueter. Attribuez-le les attributs requis, tels que «SRC","alt","largeur" et plus. Ajouter le "centre de texte”Classe à l'élément parent de l'image pour ajuster l'alignement central de l'image. Le "MX-AUTO«Classe, en combinaison avec le«bloc D«Classe, peut également être utilisée à cet effet. Cet article a expliqué comment centrer une image horizontalement à l'aide de bootstrap.