Comment aligner verticalement des divisions avec une taille dynamique en CSS ?

CSS : alignement vertical des divs avec une taille dynamique

Lorsque vous travaillez avec des éléments div contenant du contenu dynamique, tel que des images ou du flash, l'alignement les verticalement peut être un défi. Les méthodes traditionnelles, telles que la définition de hauteurs fixes ou l'utilisation d'un positionnement absolu, peuvent ne pas être réalisables dans ces situations.

Heureusement, CSS propose une solution qui permet un alignement vertical sans avoir besoin de tailles connues. Cette solution est basée sur la combinaison de vertical-align : middle et line-height : 0.

Structure HTML

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

Règles CSS

<code class="css">html, body {
    height: 100%;
    width: 100%;
    padding: 0;
}

#center {
    position: relative;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}

#wrap {
    line-height: 0;
}

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

Comment ça marche

• La hauteur de ligne de l'élément #center est définie sur une valeur fixe (par exemple, 2000 px) et l'alignement du texte est défini au centre.
• L'élément #wrap a sa hauteur de ligne définie sur 0.
• L'alignement vertical de l'image est défini au milieu, ce qui l'aligne verticalement dans la ligne de son contenu élément.
• La marge de l'élément #center est la moitié négative de la hauteur de l'élément, ce qui positionne visuellement l'élément au milieu de la fenêtre.

Cette technique fonctionne dans la plupart des systèmes modernes. navigateurs, y compris IE8, et sans avoir besoin de pirater le navigateur. Il offre une solution propre et polyvalente pour aligner verticalement des éléments div avec des tailles dynamiques.

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!