Comment centrer verticalement une image dans une division avec une hauteur réactive ?

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

Dans ce guide, nous expliquerons comment aligner verticalement une image dans un div qui a une hauteur réactive .

L'approche

Pour obtenir un alignement vertical, nous utiliserons des éléments de bloc en ligne et exploiterons les propriétés CSS telles que la position, haut, hauteur et alignement du texte. Voici comment cela fonctionne :

1. Créez un pseudo-élément

Ajoutez un pseudo-élément de bloc en ligne en tant que premier enfant du div conteneur. Réglez sa hauteur à 100 % pour remplir la hauteur du conteneur.

2. Alignement vertical

Définissez la propriété vertical-align sur milieu pour le pseudo-élément et l'image afin de vous assurer qu'ils sont alignés verticalement.

3. Supprimer l'espacement

Pour éliminer tout espace entre le pseudo-élément et l'image, définissez la taille de police du div parent sur 0, en réduisant tout contenu de texte.

Implémentation

Considérez le HTML et le CSS suivants :

<div class="container">
  <div class="img-container">
    <img src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="Image">
  </div>
</div>

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

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

.img-container {
  display: inline-block;
  vertical-align: middle;
}

Le Résultat

Cette technique permet à l'image d'être alignée verticalement dans le conteneur tout en conservant la hauteur réactive du conteneur.

Propriétés maximales pour la taille de l'image

Pour garantir que le l'image ne dépasse pas la taille du conteneur, pensez à définir les propriétés max-height et max-width sur l'image :

.img-container img {
  ...
  max-height: 100%;
  max-width: 100%;
}

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!