Comment aligner verticalement des Divs de taille dynamique avec CSS ?

Alignement vertical de divisions dimensionnées dynamiquement avec CSS

Dans le monde du CSS, obtenir un alignement parfait peut être un défi, en particulier lorsqu'il s'agit de divs de tailles inconnues ou dynamiques. Considérez le scénario suivant : vous disposez d'un div contenant une image ou un objet flash et vous souhaitez l'aligner verticalement dans son conteneur parent, quelles que soient les dimensions du conteneur ou de l'enfant.

Solution :

CSS offre une solution élégante à ce dilemme. En utilisant la combinaison de vertical-align : middle et line-height : 0, nous pouvons réaliser un centrage horizontal et vertical dans un conteneur de taille indéterminée.

Structure HTML :

<code class="html"><span id="center">
  <span id="wrap">
    <img src="http://lorempixum.com/300/250/abstract" alt="" />
  </span>
</span></code>

Styles CSS :

<code class="css">html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#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>

Explication :

• alignement vertical : le milieu aligne l'image verticalement à l'intérieur l'élément #wrap, quelle que soit sa hauteur.
• line-height: 0 supprime l'espacement des lignes par défaut pour l'élément #wrap, garantissant qu'il n'a pas de hauteur intrinsèque.
• En définissant du texte- align : center et line-height à la hauteur souhaitée du conteneur, nous établissons une ligne de base qui aligne l'image verticalement dans le conteneur.
• L'élément #center est utilisé pour positionner le conteneur verticalement dans le conteneur parent et est centré en utilisant des transformations CSS.

Remarque pour Internet Explorer 7 : Pour garantir la compatibilité avec IE7, les éléments les plus internes (#wrap et ) doivent être déclarés sur une seule ligne, comme démontré dans cette modification Structure HTML :

<code class="html"><span id="center">
  <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span></code>

Cette solution CSS2 pure fournit un alignement fiable pour les divs aux dimensions dynamiques, qu'ils contiennent des images, des objets flash ou d'autres éléments.

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!