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

Aligner verticalement une image à l'intérieur d'un div avec une hauteur réactive

Problème

Comment pouvons-nous aligner verticalement une image dans un div qui a une hauteur dynamique qui s'ajuste à la largeur lorsque la fenêtre du navigateur est redimensionnée pour conserver un rapport hauteur/largeur carré ?

Vertical Alignement

Pour y parvenir, nous pouvons utiliser la technique suivante :

1. Créer un pseudo-élément de bloc en ligne : En tant que premier (ou dernier) enfant du div parent, un pseudo-élément d'une hauteur de 100% est généré pour occuper tout le div parent. height.
2. Définir vertical-align : La propriété vertical-align est appliquée à la fois au pseudo-élément et à l'élément image pour les aligner verticalement au milieu du conteneur.
3. Supprimer l'espace blanc : Une taille de police de zéro est définie sur le parent pour éliminer l'espace blanc entre le bloc en ligne éléments.

Avantages

• Le conteneur (div parent) peut avoir des dimensions dynamiques, permettant à sa hauteur de changer avec la largeur.
• L'image les dimensions de l'élément n'ont pas besoin d'être explicitement spécifiées.
• Cette technique peut également être utilisée pour aligner verticalement un élément div avec un contenu dynamique, mais le la taille de la police du div doit être réinitialisée pour afficher le texte ci-joint.

Conteneur réactif

Pour créer un conteneur réactif, où la hauteur s'ajuste avec la largeur, nous pouvons appliquer un valeur en pourcentage à la propriété de remplissage ou de marge haut/bas.

Combinaison de l'alignement vertical et du conteneur réactif

Pour implémenter les deux verticales alignement et un conteneur réactif, nous pouvons envelopper l'élément image dans un wrapper div avec un positionnement absolu et l'étendre pour remplir tout l'espace du conteneur.

Exemple de code

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="...">
  </div>
</div>

.responsive-container {
  width: 60%;
  position: relative;
}

.dummy {
  padding-top: 100%; /* maintains 1:1 aspect ratio */
}

.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;
}

Ceci Le code montre comment aligner verticalement une image dans un conteneur réactif, où la hauteur du conteneur s'ajuste en fonction de la largeur disponible.

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!