- Comment centrer horizontalement une image dans Div ?
- Propriété de marge
- Module de boîte flexible
- Disposition de la vue en grille
- Attribut de poste
Comment centrer horizontalement une image dans Div ?
Le développeur peut utiliser la propriété margin, le module Flexbox, la disposition de la vue en grille et l'attribut Position pour centrer horizontalement une image dans la div. Suivez le guide ci-dessous pour centrer l'image horizontalement dans la balise div.
Supposons qu'il existe un div dans lequel l'image est placée de cette manière dans le fichier HTML :
< div classe = 'racine' >
< image src = '../livre.jpg' hauteur = 'cinquante%' largeur = 'cinquante%' classe = 'image' >
< / div >
L'image obtient une largeur et une hauteur de 50 % et une classe 'image'.
Utilisation de la propriété de marge
Les utilisateurs peuvent ajouter de l'espace autour des éléments HTML à l'aide de la propriété margin. Il attribue une marge en fonction de l'espace disponible après le redimensionnement de l'écran de la fenêtre. Par exemple, définit les margin-left et right sur auto, et la propriété display est définie sur block :
image {
bloc de visualisation;
marge-gauche : auto ;
marge droite : auto ;
}
Après avoir exécuté l'exemple ci-dessus, la page Web ressemble à ceci :
La sortie ci-dessus a montré que l'image est maintenant au centre.
Utilisation du module Flexbox
Le ' boîte flexible ” est un module qui contient un ensemble complet de propriétés. Dans notre cas, sélectionnez la classe d'élément racine et utilisez flex comme valeur de la propriété display. Définissez le centre comme valeur pour ' justifier-contenu ' et ' aligner les éléments ' propriétés:
.racine {affichage : flexible ;
justifier- contenu : centre;
align-items : center ;
arrière-plan- couleur : bleu;
}
La page Web ressemble à ceci, après l'exécution du code :
La sortie ci-dessus montre que l'image est affichée au centre de la div avec une couleur d'arrière-plan définie sur 'bleu'.
Utilisation du module de mise en page de la vue en grille
La disposition de la vue en grille comporte 12 colonnes, et la largeur totale est définie sur 100 % et place chaque élément à une position spécifique sur la page Web :
.racine {affichage : grille ;
place-items : centre ;
}
Dans l'extrait de code ci-dessus, la valeur 'grid' est affectée à la propriété display. Alors que 'place-item' est utilisé comme raccourci pour les propriétés 'justify-content' et 'align-items':
La sortie authentifie que l'image est au centre de la div en utilisant la méthode de la grille :
Utilisation de l'attribut de position
En définissant la position de la classe racine sur une valeur relative et la classe d'image sur une valeur absolue. L'image peut être affichée au centre de la div :
.racine {position : relative ;
}
.image {
largeur : 700 pixels ;
hauteur : 500 pixels ;
position : absolue ;
gauche: cinquante % ;
transformer : translateX ( - cinquante % ) ;
}
L'image est déplacée vers la gauche de '50 %', puis retransforme à '-50 %' sur l'axe X. Il affiche l'image au centre de la div horizontalement :
C'est ainsi que l'image peut être centrée horizontalement dans la div.
Conclusion
Pour définir horizontalement l'image dans un élément div, utilisez le ' marge ”, “ module flexible ”, “ disposition de la grille ' et ' position ' propriétés. Le ' marge ” propriété de gauche et de droite est définie sur auto. Le «module flexible» et la «disposition de la grille» définissent l'affichage sur flex et grille respectivement et utilisent le « placer l'élément “ propriété de centrer l'image. La propriété position définit la valeur relative à la classe racine et absolue à la classe image et utilise les propriétés 'left' et 'transform'. Ce blog a démontré avec succès comment centrer horizontalement des images dans un div.