Comment centrer une image avec CSS

Dans les pages HTML, l'utilisation d'images peut enrichir la page. Cependant, lors de l’utilisation d’images, nous pouvons rencontrer le problème que l’image n’est pas centrée. En effet, la position de l'image est automatiquement déterminée par le navigateur plutôt que définie manuellement par nos soins. À ce stade, nous pouvons utiliser CSS pour centrer l'image. Cet article explique comment centrer une image avec CSS.

1. Utilisez la marge pour centrer l'image

L'utilisation de la marge est le moyen le plus courant de centrer l'image. Nous pouvons centrer l'image en ajoutant une valeur de marge de 50 % pour le haut, le bas, la gauche et la droite, puis la moitié négative de la largeur/hauteur de l'image.

Exemple de code :

HTML:

<div class="container">
  <img class="center-image" src="example.jpg">
</div>

CSS:

.container {
  position: relative;
}

.center-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. Utilisez flexbox pour centrer l'image

Flexbox est une mise en page CSS3 qui nous permet de centrer facilement les éléments enfants en définissant la propriété flex de l'élément parent. . Par exemple, le code CSS suivant peut centrer tous les éléments enfants horizontalement et verticalement :

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Donc spécifiquement pour centrer l'élément image, il nous suffit de définir le conteneur où se trouve l'image pour qu'il soit flexible, et de définir les éléments d'alignement et attributs de justification de contenu.

Exemple de code :

HTML:

<div class="container">
  <img src="example.jpg">
</div>

CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. Utilisez la grille pour centrer l'image

Semblable à flexbox, nous pouvons également utiliser la grille CSS pour centrer l'image. Nous utilisons le conteneur d'images comme conteneur de grille et le plaçons sur un alignement centré.

Exemple de code :

HTML:

<div class="container">
  <img src="example.jpg">
</div>

CSS:

.container {
  display: grid;
  place-items: center;
}

Résumé :

Voici trois méthodes ci-dessus pour centrer l'image. Nous pouvons choisir une méthode à mettre en œuvre en fonction de la situation réelle. La méthode de la marge est la plus couramment utilisée, mais si vous devez implémenter d'autres mises en page, la flexbox et la grille peuvent vous convenir davantage. Bien entendu, dans le développement réel, plusieurs méthodes peuvent également être utilisées en combinaison pour obtenir de meilleurs résultats.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!