Comment centrer une image horizontalement et verticalement dans une div ?

Alignement de l'image au centre et au milieu de la division

Dans la conception Web, obtenir un alignement précis des éléments est crucial pour une interface utilisateur soignée et visuellement attrayante. Un défi courant consiste à aligner une image dans un conteneur div afin qu'elle soit centrée à la fois horizontalement et verticalement.

Pour résoudre ce problème, considérez la structure div suivante :

<div>

Pour aligner l'image dans au centre du div, nous pouvons utiliser les propriétés CSS :

body {
  margin: 0;
}

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

En définissant margin-left: auto; et margin-right: auto;, nous demandons au navigateur d'ajuster automatiquement les marges horizontales de l'image pour garantir qu'elle est centrée dans le div. De plus, réglage display: block; permet à l'image d'occuper sa propre ligne et ainsi d'être centrée verticalement.

Avec ces propriétés CSS en place, votre image sera précisément alignée au centre et au milieu du conteneur div, quelle que soit la taille de l'écran ou div.

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!