AAA
BBB
BBB
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:
- Le sumt extérieur d’une boîte flottante ne peut pas être supérieur au sumt de son bloc contenant .
- 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.
- 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.
- Une boîte flottante doit être placée aussi haut que possible.
Cela dit, vous pouvez profiter de la règle n ° 4:
display: inline-block
. 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