Découvrez comment centrer une image avec CSS

Dans la conception Web, les images font généralement partie intégrante, et lorsque les images ne répondent pas aux spécifications de conception ou ne sont pas centrées, elles peuvent détruire la mise en page et l'esthétique de l'ensemble du site Web. Par conséquent, la manière de centrer l’image est devenue une question importante. Il existe différentes méthodes disponibles en CSS pour centrer une image horizontalement et verticalement. Dans cet article, nous verrons comment centrer une image avec CSS.

1. Centrez-le horizontalement

1. margin:auto

Utiliser margin:auto est une méthode simple et couramment utilisée, qui permet de centrer l'image horizontalement. Cette méthode définit les valeurs gauche et droite de l'attribut margin sur auto (margin : 0 auto ;), ce qui permet de centrer l'élément horizontalement dans son conteneur et convient à une seule image.

Le code suivant :

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  width: 300px;
  margin: 0 auto;
}

Utilisez margin:auto pour obtenir un centrage horizontal. Ici, nous définissons les marges gauche et droite de l'emballage du conteneur sur auto :

Le code suivant :

img {  
  display: block;
  margin: 0 auto;
}

Obtenez un centrage horizontal en définissant la marge de. l'image à 0 auto.

2. text-align:center

Nous pouvons utiliser text-align:center; pour centrer horizontalement les images et autres éléments en ligne, mais sachez que cette méthode ne s'applique qu'aux images placées à l'intérieur d'un conteneur.

Le code suivant :

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  width: 300px;
  text-align: center;
}

En définissant l'alignement du texte de l'emballage du conteneur au centre, l'image incluse est centrée horizontalement.

3. position:absolute et left:50%

En utilisant cet attribut, nous définissons le style de l'image sur position:absolute et left:50% pour centrer l'image horizontalement. Ensuite, nous devons définir la marge gauche (marge gauche) de l'image sur la moitié de la largeur de l'image elle-même (largeur/2). Cette méthode convient aux situations où nous n'avons besoin que de centrer l'image horizontalement et sans nous en soucier. à propos de la hauteur de l'image.

Le code suivant :

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

img {
  position: absolute;
  left: 50%;
  margin-left: -150px;
}

Déterminez la position de l'image en définissant la position de l'image sur absolue, gauche : 50 %, puis définissez la marge gauche sur un nombre négatif en fonction de la largeur réelle de l'image pour centrer l'image horizontalement.

2. Centrage vertical

1. line-height

Lorsque la hauteur de l'image est égale à la hauteur de ligne de l'élément, nous pouvons centrer verticalement l'image dans le conteneur. Cette méthode convient aux situations où il n’y a qu’une seule ligne de texte.

Le code suivant :

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
  <p>只有单行文本</p>
</div>

.wrapper {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

Centrez l'image verticalement en réglant la hauteur et la hauteur de ligne du conteneur à la même valeur.

2. display:flex and align-items:center

Utilisez display:flex and align-items:center pour centrer les images et autres éléments verticalement dans le conteneur. Cette méthode convient aux situations où il existe plusieurs éléments centrés verticalement (tels que deux images) dans un conteneur.

Le code suivant :

<div class="wrapper">
  <img src="image1.jpg" alt="示例图片1">
  <img src="image2.jpg" alt="示例图片2">
</div>

.wrapper {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

En définissant la propriété d'affichage du conteneur sur flex et en utilisant les propriétés align-items:center et justifier-content:center, l'image est centrée horizontalement et verticalement dans le conteneur.

3. position:absolute et top:50%

Avec les attributs position:absolute et top:50%, nous pouvons centrer verticalement l'image. Ensuite, définissez margin-top à la moitié de la hauteur de l'image elle-même.

Le code suivant :

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

En définissant la position de l'image sur absolue, position : relative ; la hauteur du conteneur wrapper est définie sur 200px. Réglez ensuite le haut de l'image à 50 % pour centrer l'image verticalement, et réglez la marge supérieure à la moitié de la hauteur de l'image pour obtenir un centrage vertical.

3. Centrage horizontal et vertical

Si nous devons centrer l'image horizontalement et verticalement, nous pouvons utiliser d'autres combinaisons des méthodes ci-dessus.

1. position : absolue, haut : 50 % et gauche : 50 %

Cette méthode est la méthode la plus couramment utilisée. L'utilisation des attributs position : absolue, haut : 50 % et gauche : 50 % peut obtenir des attributs horizontaux et verticaux simultanés. centrage. Cette méthode fonctionne lorsque vous avez uniquement besoin de centrer une image.

Le code suivant :

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

En réglant la position et les propriétés haut et gauche de l'image à 50%, le centrage horizontal et vertical est obtenu. Ensuite, utilisez la propriété transform pour déplacer l'image de la moitié de la largeur et de la hauteur vers le coin supérieur gauche (c'est-à-dire traduire (-50%, -50%)).

2. Utilisez display:flex et justifier-content et align-items

En utilisant les propriétés display:flex, justifier-content et align-items, nous pouvons centrer plusieurs images horizontalement et verticalement en même temps. Cette méthode convient aux situations où plusieurs images se trouvent sur la même ligne et doivent être centrées sur la page Web en même temps.

Le code suivant :

<div class="wrapper">
  <img src="image1.jpg" alt="示例图片1">
  <img src="image2.jpg" alt="示例图片2">
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 200px;
}
img {
  margin: 5px;
}

En définissant l'affichage du conteneur sur flex et en utilisant les propriétés justification-content et align-items, l'image peut être centrée horizontalement et verticalement en même temps.

Conclusion

Le centrage des images est l'une des techniques souvent utilisées en conception Web. Lorsque nous avons plusieurs images qui doivent être centrées sur une page, nous devons choisir une méthode de centrage adaptée. Le centrage horizontal peut être obtenu à l'aide des propriétés margin , text-align et position, le centrage vertical peut être obtenu à l'aide des propriétés line-height , display et position, et le centrage horizontal et vertical peut également être obtenu à l'aide d'une combinaison de ces propriétés. Par conséquent, choisir la méthode de centrage d’image appropriée dans la conception Web peut nous aider à créer une meilleure expérience utilisateur et un meilleur style de conception.

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!