Comment centrer une image en CSS

Dans la conception de sites Web, les images sont un élément indispensable. Lorsque la taille de l'image est plus petite que celle du conteneur parent, ou que la largeur et la hauteur du conteneur parent sont incertaines, la manière de centrer l'image devient un problème. Nous pouvons résoudre ce problème grâce aux propriétés de disposition et de position flexibles de CSS.

1. Utiliser la disposition flexible

La disposition flexible est une nouvelle méthode de mise en page introduite par CSS3. Elle peut contrôler de manière flexible la disposition du conteneur. Il est très simple de centrer les éléments enfants dans le conteneur parent.

1. Utilisez les propriétés justifier-content et align-items

Nous pouvons utiliser les propriétés justifier-content et align-items dans la mise en page flexible pour obtenir un centrage horizontal et vertical de l'image. L'attribut justifier-content peut contrôler la disposition des éléments enfants dans la direction de l'axe principal, et l'attribut align-items peut contrôler la disposition des éléments enfants dans la direction de l'axe transversal.

Tout d'abord, nous devons définir le conteneur parent de l'image sur display:flex, et définir align-items et justifier-content au centre.

<div class="parent">
  <img src="your-image.jpg">
</div>

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

De cette façon, l'image est centrée horizontalement et verticalement.

2. Utilisez les attributs flex-direction et align-self

Nous pouvons également utiliser les attributs flex-direction et align-self dans la mise en page flex pour centrer l'image. La propriété flex-direction peut changer la direction de l'axe principal et la propriété align-self peut contrôler la disposition des éléments enfants dans la direction transversale de l'axe.

Définissez le conteneur parent de l'image sur display:flex et définissez flex-direction sur column.

<div class="parent">
  <img src="your-image.jpg">
</div>

.parent {
  display: flex;
  flex-direction: column;
}

Ensuite, nous devons définir la propriété align-self de l'image sur center pour obtenir le centrage vertical de l'image.

img {
  align-self: center;
}

2. Utilisez l'attribut position

En plus d'utiliser la disposition flexible, nous pouvons également utiliser l'attribut position pour centrer l'image. La façon dont vous utilisez la propriété position est un peu différente.

1. Utiliser le positionnement absolu

Nous pouvons définir l'image sur un positionnement absolu, puis utiliser les attributs left et top pour contrôler la position de l'image dans le conteneur parent. Définissez la position du conteneur parent sur relative afin que l'image puisse être positionnée par rapport au conteneur parent.

<div class="parent">
  <img src="your-image.jpg">
</div>

.parent {
  position: relative;
}

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

De cette façon, l'image est centrée horizontalement et verticalement.

2. Utiliser des marges négatives

Nous pouvons également utiliser des marges négatives pour centrer l'image. Cette méthode est implémentée en ajoutant des éléments supplémentaires au conteneur parent. Définissez le conteneur parent sur position:relative, ajoutez un élément vide et placez l'image dans l'élément vide.

<div class="parent">
  <div class="placeholder"></div>
  <img src="your-image.jpg">
</div>

.parent {
  position: relative;
}

.placeholder {
  height: 100%;
  margin-right: -100%;
}

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

De cette façon, l'image peut également être centrée horizontalement et verticalement.

Résumé des points clés

Lors du centrage de l'image, nous pouvons utiliser la disposition flex et l'attribut de position pour y parvenir. Lors de l'utilisation de la mise en page flex, nous pouvons utiliser les propriétés justification-content et align-items, ainsi que les propriétés flex-direction et align-self. Lors de l'utilisation de l'attribut position, nous pouvons définir l'image sur un positionnement absolu ou utiliser des marges négatives.

En général, l'utilisation de la mise en page flex est plus flexible et plus simple, mais elle nécessite l'utilisation de CSS3, et l'utilisation de l'attribut position est plus compatible avec les anciens navigateurs. Dans les applications pratiques, nous pouvons choisir quelle méthode utiliser pour centrer l’image en fonction de la situation.

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!