CSS Centrage des Images
Centrage des Images
Avec CSS, vous pouvez centrer des images de plusieurs manières.
Une image peut être centrée horizontalement, verticalement, ou les deux.
Centrer une Image Horizontalement
Pour afficher une image centrée horizontalement, nous pouvons utiliser margin: auto; ou display: flex; .
1. Utiliser margin: auto
Une façon de centrer une image horizontalement sur une page est d'utiliser margin: auto .
Puisque l'élément <img> est un élément en ligne par défaut (et que margin: auto n'a aucun effet sur les éléments en ligne), nous devons convertir l'image en un élément de bloc, avec display: block .
De plus, nous devons définir une width . La largeur de l'image doit être inférieure à celle de la page.
Voici une image centrée horizontalement utilisant margin: auto :
Exemple
Image centrée horizontalement utilisant margin: auto :
img {
display: block;
margin: auto;
width: 50%;
} 2. Utiliser display: flex
Une autre façon de centrer une image horizontalement sur une page est d'utiliser display: flex .
Ici, nous plaçons l'élément <img> à l'intérieur d'un conteneur <div> .
Nous ajoutons le CSS suivant au conteneur div :
-
display: flex -
justify-content: center(centre l'image horizontalement dans le conteneur)
Ensuite, nous définissons une width pour l'image. La largeur de l'image doit être inférieure à celle de la page.
Voici une image centrée horizontalement utilisant display: flex :
Exemple
Image centrée horizontalement utilisant display: flex :
div {
display: flex;
justify-content: center;
}
img {
width: 50%;
} Centrage Vertical et Horizontal
Pour afficher une image qui est à la fois centrée verticalement et horizontalement (vrai centrage), nous pouvons utiliser display: flex; ou display: grid; .
1. Utiliser display: flex
Pour afficher une image qui est à la fois centrée verticalement et horizontalement avec flexbox , nous utilisons une combinaison de :
-
display: flex; -
justify-content: center;(centre l'image horizontalement dans le conteneur) -
align-items: center;(centre l'image verticalement dans le conteneur) -
height: 600px;(la hauteur du conteneur)
Ici, nous plaçons également l'élément <img> à l'intérieur d'un conteneur <div> .
Ensuite, nous définissons une width pour l'image (doit être inférieure à la largeur du conteneur).
Voici une image centrée verticalement et horizontalement avec flexbox :
Exemple
Vrai centrage utilisant display: flex :
div {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
border: 1px solid black;
}
img {
width: 50%;
} 2. Utiliser display: grid
Pour afficher une image qui est à la fois centrée verticalement et horizontalement avec grid , nous utilisons une combinaison de :
-
display: grid; -
place-items: center;(centre l'image horizontalement et verticalement dans le conteneur) -
height: 600px;(la hauteur du conteneur)
Ici, nous plaçons également l'élément <img> à l'intérieur d'un conteneur <div> .
Ensuite, nous définissons une width pour l'image (doit être inférieure à la largeur du conteneur).
Voici une image centrée verticalement et horizontalement avec grid :
Exemple
Vrai centrage utilisant display: grid :
div {
display: grid;
place-items: center;
height: 600px;
border: 1px solid black;
}
img {
width: 50%;
}