Comment centrer verticalement une image dans une division de taille réactive ?

Comment aligner verticalement une image dans une div avec une hauteur flexible

Problème :

Vous avez un conteneur div avec une hauteur réactive qui s'ajuste proportionnellement aux changements de largeur. Dans ce conteneur, vous disposez d’une image de différentes hauteurs. Votre défi est d'aligner verticalement l'image au milieu du conteneur quelle que soit sa hauteur.

Solution :

Pour réaliser un alignement vertical dans cet environnement réactif, nous introduisons une approche innovante impliquant le placement d'un élément en ligne à côté de l'image.

Vertical Alignement :

1. Création de pseudo-éléments : Dans le conteneur .img (qui héberge l'image), nous créons directement un (pseudo-)élément de niveau bloc avant l'image.
2. Réglage de la hauteur : Ce pseudo-élément s'étend verticalement pour consommer toute la hauteur disponible, en appliquant une hauteur de 100 % pour correspondre à la hauteur du conteneur.
3. Alignement vertical des éléments :Le pseudo-élément et l'image gagnent en alignement vertical : milieu ; style, assurant un bon alignement dans la ligne.
4. Suppression de la taille de police : Pour supprimer tout espace blanc entre ces éléments, nous définissons font-size : 0 ; sur le conteneur parent.

Avantages de cette approche :

• Dimensions dynamiques du conteneur
• Alignement automatique de l'image sans spécifications explicites de hauteur
• Polyvalence dans l'alignement d'autres éléments, tels que les divs avec un contenu variable (ajuster la taille de la police à texte à afficher)

Conteneur réactif :

Pour rendre la hauteur du conteneur flexible avec sa largeur, nous utilisons des valeurs de pourcentage sur la propriété padding-top :

• 100 % de rembourrage : crée un carré de hauteur et de largeur égales
• Pourcentage plus élevé valeurs (par exemple, 150 % ou 200 %) : la hauteur est un pourcentage plus grand de la largeur

Cette technique de remplissage peut également être appliquée à un div enfant ou à des pseudo-éléments CSS.

Placement du contenu :

Padding-top crée un espace excessif au-dessus et/ou en dessous du contenu dans le conteneur. Pour résoudre ce problème, nous enfermons le contenu dans un élément wrapper :

• Positionnement absolu : supprime le wrapper du flux normal du document, lui permettant de remplir tout l'espace du conteneur.
• Haut Propriétés , right, bottom et left : développez l'emballage pour couvrir les dimensions du conteneur.

Final Mise en œuvre :

En combinant ces techniques, nous atteignons notre objectif :

<div class="responsive-container">
  <div class="dummy"></div>
  <div class="img-container">
    <img src="image.jpg" alt="Image">
  </div>
</div>

.responsive-container {
  width: 60%;
  height: 300px;  /* Example height for demo purposes */
  position: relative;
}

.img-container {
  text-align: center;
  font: 0/0 a;
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
  max-height: 100%;  /* Optional: Ensures image stays within container */
  max-width: 100%;   /* Optional: Ensures image stays within container */
}

Démonstration :

[Aligner verticalement l'image en Responsive Div](https://codepen.io/cristianorocha/pen/dywbQMV)

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!