Comment puis-je aligner verticalement une division avec des dimensions inconnues en CSS ?

Alignement vertical d'un div avec des dimensions inconnues

En CSS, ajuster dynamiquement l'alignement vertical d'un div peut être difficile lorsque la taille du div est inconnue . Voici une solution qui résout ce problème :

Solution CSS

Cette solution CSS pure utilise vertical-align: middle dans un div plus grand avec une hauteur de ligne fixe :

<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>

Explication

Le #center div est positionné au centre de son parent avec top : 50% et ajustement de la marge supérieure pour représenter la moitié de sa hauteur. L'énorme hauteur de ligne garantit que le contenu du texte (dans ce cas, le div enfant #wrap) reste en bas.

À l'intérieur de #center, #wrap contient l'image avec vertical-align: middle, qui garantit l'alignement vertical quelle que soit la taille de l'image.

Mise en garde

Le seul navigateur avec une mise en garde est IE7. Pour cela, le div interne #wrap et l'image doivent être sur la même ligne :

<code class="html"><span id="center">
  <span id="wrap"><img src="..." 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!