CSS nous aide à contrôler l'affichage des images dans les applications Web. Le centrage d'images ou de textes est une tâche courante en CSS. Pour centrer une image, il faut définir la valeur de marge gauche et marge droite à auto et faites-en un élément de bloc en utilisant le bloc de visualisation; propriété.
Si l'image est dans l'élément div, alors nous pouvons utiliser le alignement du texte : centre ; propriété pour aligner l’image au centre du div.
Le On dit qu'un élément est un élément en ligne qui peut facilement être centré en appliquant le alignement du texte : centre ; propriété de CSS à l’élément parent qui le contient.
Remarque : L'image ne peut pas être centrée si la largeur est définie sur 100 % (pleine largeur).
Nous pouvons utiliser la propriété raccourcie marge et réglez-le sur auto pour aligner l'image au centre, plutôt que d'utiliser le marge gauche et marge droite propriété.
Voyons comment centrer une image en appliquant alignement du texte : centre ; propriété à son élément parent.
Exemple
Dans cet exemple, nous alignons les images en utilisant le alignement du texte : centre ; propriété. L'image est dans l'élément div.
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> Testez-le maintenant Sortir
Exemple
Maintenant, nous utilisons le marge gauche : auto ; marge droite : auto ; et bloc de visualisation; propriétés pour aligner l’image au centre.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Testez-le maintenant Sortir
