Comment centrer une image horizontalement et verticalement dans une division ?

Alignement de l'image de manière centrale au sein d'une division

Maintenir l'alignement correct des images dans les pages Web peut souvent poser un défi. Dans ce cas précis, réaliser le centrage horizontal et vertical d'une image à l'intérieur d'un élément div donné nécessite une approche ciblée.

Pour obtenir l'alignement souhaité, l'image doit être positionnée au centre de l'élément div à la fois horizontalement. et verticalement. Pour ce faire, les propriétés CSS suivantes peuvent être utilisées :

body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

Voici un aperçu du fonctionnement de ces propriétés :

1. margin-left: auto; et margin-right: auto; : Ces propriétés ajustent automatiquement les marges gauche et droite de l'élément image, en le poussant vers le centre de son conteneur parent (l'élément div).
2. affichage : block; : Cette propriété garantit que l'élément image se comporte comme un élément de niveau bloc, occupant toute la largeur de son conteneur parent. Cela empêche l'image de s'empiler sur d'autres éléments du div.

Avec ces propriétés CSS en place, l'image sera positionnée au centre et au milieu de l'élément div, lui donnant l'apparence souhaitée. alignement.

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!