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

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

...
...

Les deux flottants sont alignés par défaut par défaut et ont des hauteurs variables / inconnues et différentes. Y a-t-il un moyen de les centrer verticalement?

J’ai finalement fait le div externe

 display: table 

et les divs internes

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

mais je suis juste curieux de savoir comment faire avec les flotteurs.

Vous ne pouvez pas le faire directement, car les flottants sont alignés sur le haut:

S’il y a une zone de ligne, le haut externe de la zone flottante est aligné avec le haut de la zone de ligne actuelle.

Les règles exactes disent:

  1. Le sumt extérieur d’une boîte flottante ne peut pas être supérieur au sumt de son bloc contenant .
  2. Le sumt extérieur d’une boîte flottante ne peut pas être supérieur au sumt extérieur d’un bloc ou d’une boîte flottante généré par un élément plus tôt dans le document source.
  3. La partie supérieure de la zone flottante d’un élément peut ne pas être supérieure à la partie supérieure d’une zone contenant une zone générée par un élément antérieur dans le 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 flottant à l’intérieur des éléments en ligne qui établissent un nouveau contexte de formatage de bloc / BFC), par exemple display: inline-block .
  • Ces wrappers contiendront les floats car ils établissent un BFC, et seront l’un à côté de l’autre car ils sont au niveau inline.
  • Utilisez vertical-align pour aligner ces enveloppes verticalement.

Sachez que de l’espace peut apparaître entre les wrappers du bloc en ligne. Voir Comment supprimer l’espace entre les éléments d’un bloc en ligne? réparer.

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

AAA

BBB

BBB