web-dev-qa-db-fra.com

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

J'ai une div externe (horizontalement) centrée contenant deux éléments de largeur inconnue:

<div style='width:800px; margin:0 auto'>
  <div style='float:left'>...</div>
  <div style='float:right'>...</div>
</div>

Les deux flotteurs sont alignés en haut par défaut, et ont des hauteurs différentes/inconnues et différentes. Est-il possible de les centrer verticalement?

J'ai finalement fait la div externe

display: table

et les divs intérieurs

display: table-cell;
vertical-align: middle;
text-align: left/right;

mais je suis juste curieux de savoir s'il existe un moyen de faire cela avec les flotteurs.

csscss-floatvertical-alignment
44
Yang

Vous ne pouvez pas le faire directement, car floats sont alignés en haut:

S'il existe une boîte de ligne, le haut extérieur de la boîte flottante est aligné sur le haut de la boîte de ligne actuelle.

Le exact règles dites (emphase mienne):

  1. Une boîte flottante extérieur supérieur ne peut pas être plus haute que le sommet de son bloc contenant le bloc .
  2. Le extérieur supérieur d'une boîte flottante ne peut pas être plus haut que le haut extérieur de tout bloc ou flotté boîte générée par un élément plus tôt dans le document source.
  3. Le extérieur supérieur de la boîte flottante d'un élément ne peut pas être plus haut que le haut de la line-box contenant une boîte générée par un élément antérieur au document source .
  1. Une boîte flottante doit être placée aussi haut que possible.

Cela dit, vous pouvez profiter de la règle n ° 4:

  • Placez chaque élément float à l'intérieur de inline-level des éléments qui établissent un nouveau contexte de formatage de bloc /BFC), par exemple. display: inline-block.
  • Ces wrappers contiendront les flottants car ils établiront un BFC et seront juxtaposés car ils sont au niveau en ligne.
  • Utilisez vertical-align pour aligner ces enveloppes verticalement.

Sachez qu’il peut y avoir un espace entre les enveloppes de bloc en ligne. Voir Comment supprimer l'espace entre les éléments du bloc inline? pour le corriger.

.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%;
}
<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>
57
Oriol

Une autre approche serait d'utiliser flex - cela pourrait remplacer un float si vous avez deux parties. L'un (flottant) serait de taille automatique, et le second deviendrait occuper tout le conteneur. Sur l'axe transversal, sélectionnez center et le tour est joué, vous obtenez l'effet des éléments float et centré.

Voici une belle feuille de notes sur flex: http://jonibologna.com/flexbox-cheatsheet/

9
greenoldman

Nope c'est quand les cellules de table semblent soudainement être une bonne idée. Si c'est une hauteur fixe, vous pouvez utiliser line-height.

3
Trent Stewart