Comment centrer verticalement des éléments flottants avec des hauteurs inconnues à l'aide d'éléments en bloc en ligne ?

Comment centrer verticalement des éléments flottants de hauteurs inconnues avec des éléments de bloc en ligne

Bien que les éléments flottants soient intrinsèquement positionnés les uns à côté des autres, ils sont généralement alignés de haut en bas. -top quelle que soit leur hauteur. Cela peut entraîner un désalignement vertical inattendu dans certaines configurations.

Pour centrer verticalement des éléments flottants de hauteurs inconnues, vous devez contourner l'alignement naturel supérieur des flotteurs. Ceci peut être réalisé en suivant les étapes suivantes :

1. Créer des wrappers de bloc en ligne : Entourez chaque élément flottant d'un élément de bloc en ligne. Les éléments de bloc en ligne s'écoulent horizontalement, permettant aux flotteurs de conserver leur positionnement adjacent.
2. Établir l'alignement vertical : Appliquer l'alignement vertical : milieu ; aux wrappers de blocs en ligne. Cette propriété spécifie l'alignement vertical des éléments de bloc en ligne, positionnant ainsi les éléments flottants à l'intérieur de ceux-ci centrés verticalement.
3. Ajuster la largeur pour un positionnement côte à côte : Pour garantir que l'élément en ligne -les wrappers de blocs sont positionnés côte à côte, définissez leur largeur sur une valeur en pourcentage qui totalise 100 %. Cela permet des ajustements flexibles dans l'espace disponible tout en conservant la contiguïté horizontale.

En suivant ces étapes, vous pouvez centrer verticalement des éléments flottants de hauteurs inconnues sans modifier les éléments flottants eux-mêmes. Cette technique permet d'intégrer parfaitement un contenu dynamique de différentes hauteurs dans une mise en page visuellement équilibrée.

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!