Comment aligner verticalement des divisions de taille dynamique en CSS ?

Alignement vertical de divs dimensionnés dynamiquement en CSS

L'alignement vertical d'un conteneur div peut poser un défi lorsque la hauteur et la largeur du div sont inconnues au préalable . Cela peut souvent se produire lorsque le div contient une image ou un objet Flash.

Alignement vertical avec des tailles dynamiques

Pour obtenir un alignement vertical dans ce scénario, nous pouvons exploiter la puissance de CSS2. Cette solution n'implique aucune astuce ni hack et repose uniquement sur les principes CSS.

La clé de l'alignement est la combinaison de alignement vertical : milieu et hauteur de ligne : 0 appliqué à l'élément enfant (« wrap ») dans le conteneur (« centre »). Cependant, pour que cela fonctionne, le conteneur doit avoir une hauteur de ligne fixe.

Structure HTML :

<code class="html"><span id="center">
    <span id="wrap">
        <img src="image.png" alt="" />
    </span>
</span></code>

Styles CSS :

<code class="css">#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}

#wrap {
    line-height: 0;
}

#wrap img {
    vertical-align: middle;
}</code>

Détails de mise en œuvre :

• Positionner le conteneur : Le div « centre » reçoit une position relative et est aligné verticalement à 50 % du conteneur parent. Sa hauteur est définie sur 2 000 px pour garantir un espace suffisant pour l'alignement.
• Définissez la hauteur de la ligne sur 0 : Le div 'wrap' a sa hauteur de ligne définie sur 0, supprimant ainsi tout espace entre les lignes. .
• Alignement du milieu : L'image enfant du div 'wrap' est alignée verticalement au centre à l'aide de 'vertical-align: middle'.

Compatibilité

Cette solution a été testée dans IE8, Opera, Safari, Firefox et Chrome.

IE7 Avertissement :

Dans IE7 , il est nécessaire de combiner les deux éléments les plus intérieurs en une seule ligne pour obtenir un bon alignement :

<code class="html"><span id="center">
    <span id="wrap"><img src="image.png" alt="" /></span>
</span></code>

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!