Comment centrer verticalement des éléments flottants de hauteurs inconnues ?

Éléments flottants alignés verticalement au milieu de hauteurs inconnues

Problème :

Vous avez un élément conteneur qui centre horizontalement deux éléments flottants de différentes hauteurs. Par défaut, ces flotteurs s'alignent sur le haut du conteneur. Comment pouvez-vous les centrer verticalement ?

Réponse :

L'alignement vertical direct des flotteurs n'est pas possible, car ils adhèrent à des règles d'alignement spécifiques qui donnent la priorité à l'alignement vers le haut. Cependant, vous pouvez obtenir cet effet en exploitant la règle selon laquelle les flottants peuvent être contenus dans des éléments qui établissent un nouveau contexte de formatage de bloc (BFC).

Solution :

1. Enveloppez chaque flotteur dans un élément de niveau en ligne avec display : inline-block. Cela crée un BFC autour du flotteur et permet un alignement vertical.
2. Utilisez vertical-align pour aligner verticalement les emballages du bloc en ligne.
3. Assurez-vous que les emballages ont une largeur suffisante pour accueillir leur contenu, sinon un espace peut apparaître entre eux.

Exemple :

<code class="css">.float-left {
  float: left;
}

.float-right {
  float: right;
}

#main {
  border: 1px solid blue;
  margin: 0 auto;
  width: 500px;
}

/* Float wrappers */
#main > div {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}</code>

<code class="html"><div id="main">
  <div>
    <div class="float-left">
      <p>AAA</p>
    </div>
  </div>
  <div>
    <div class="float-right">
      <p>BBB</p>
      <p>BBB</p>
    </div>
  </div>
</div></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!