Wie zentriere ich schwebende Elemente mit unbekannter Höhe mithilfe von Inline-Block-Elementen vertikal?

So zentrieren Sie schwebende Elemente unbekannter Höhe vertikal mit Inline-Block-Elementen

Während schwebende Elemente von Natur aus nebeneinander positioniert sind, sind sie normalerweise von oben nach unten ausgerichtet -oben, unabhängig von ihrer Größe. Dies kann in bestimmten Layouts zu unerwarteten vertikalen Fehlausrichtungen führen.

Um schwebende Elemente unbekannter Höhe vertikal zu zentrieren, müssen Sie die natürliche obere Ausrichtung von Schwimmern umgehen. Dies kann durch die folgenden Schritte erreicht werden:

1. Inline-Block-Wrapper erstellen: Umgeben Sie jedes schwebende Element mit einem Inline-Block-Element. Inline-Block-Elemente fließen horizontal, sodass die Floats ihre angrenzende Positionierung beibehalten.
2. Vertikale Ausrichtung festlegen: Vertical-align: middle anwenden; zu den Inline-Block-Wrappern. Diese Eigenschaft gibt die vertikale Ausrichtung der Inline-Block-Elemente an und positioniert so die schwebenden Elemente darin vertikal zentriert.
3. Breite für die Side-by-Side-Positionierung anpassen: Um sicherzustellen, dass die Inline -Block-Wrapper werden nebeneinander positioniert. Stellen Sie ihre Breite auf einen Prozentwert ein, der sich auf 100 % summiert. Dies ermöglicht flexible Anpassungen des verfügbaren Raums unter Beibehaltung der horizontalen Nachbarschaft.

Durch Befolgen dieser Schritte können Sie schwebende Elemente unbekannter Höhe vertikal zentrieren, ohne die schwebenden Elemente selbst zu verändern. Mit dieser Technik können dynamische Inhalte mit unterschiedlichen Höhen nahtlos in ein optisch ausgewogenes Layout integriert werden.

Das obige ist der detaillierte Inhalt vonWie zentriere ich schwebende Elemente mit unbekannter Höhe mithilfe von Inline-Block-Elementen vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!