Comment aligner verticalement des images dans des conteneurs de taille dynamique ?

Alignement vertical des images dans des conteneurs à hauteur dynamique

Problème :Comment aligner verticalement des images dans des conteneurs réactifs dont les hauteurs sont déterminés par le navigateur en fonction de leur largeur ?

Solution :

1. Utilisation d'éléments en ligne pour l'alignement vertical :

Pour aligner verticalement des éléments en ligne dans un élément parent, créez un (pseudo-)élément de niveau bloc en tant que premier enfant et définissez sa hauteur à 100 % de son parent. . De plus, appliquez vertical-align: middle au pseudo-élément et à l'élément d'image cible.

2. Avantages :

• Les dimensions dynamiques des conteneurs sont prises en charge.
• Les dimensions de l'image n'ont pas besoin d'être explicitement spécifiées.
• Peut être utilisé pour aligner en ligne ou div verticalement, avec la possibilité de réinitialiser la taille de la police pour div éléments pour afficher leur contenu.

3. Conteneur réactif avec alignement vertical de l'image :

Pour créer un conteneur réactif avec une hauteur qui s'adapte à sa largeur, utilisez une valeur en pourcentage pour la propriété padding-top.

4. Ajout de contenu au conteneur réactif :

Utilisez un élément wrapper dans le conteneur réactif pour héberger le contenu. Positionnez l'emballage de manière absolue et agrandissez-le pour remplir l'espace du conteneur.

Code HTML :

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

Code CSS pour l'alignement vertical :

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

Code CSS pour le réactif Conteneur :

.responsive-container {
    position: relative;
}

.responsive-container .wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

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!