Warum zentriert „oben: 50 %' mein Element nicht vertikal, wenn „links: 50 %' ordnungsgemäß funktioniert?

CSS-Top-Prozent verhält sich nicht wie erwartet: Eintauchen in die Gründe

Auf der Suche nach einem reaktionsfähigen Layout stoßen Sie auf eine Anomalie, bei der „Top „:50 %“ funktioniert nicht wie erwartet, während „links:50 %“ ohne Probleme funktioniert. Warum tritt das auf?

Um das Verhalten zu verstehen, betrachten Sie die folgende übergeordnete und untergeordnete Elementstruktur:

<div>

Der Schlüssel zur Lösung des Problems liegt darin, zu verstehen, wie die Eigenschaft „oben“ funktioniert CSS. Wenn Sie einen Prozentsatz angeben, beispielsweise „50 %“, wird dieser relativ zur Höhe des übergeordneten Containers berechnet. In diesem Szenario ist für den übergeordneten Container jedoch keine explizite Höhe definiert, sodass die Eigenschaft „oben“ effektiv anhand eines unbekannten Werts berechnet wird.

Um dies zu beheben, müssen Sie eine feste Höhe für den übergeordneten Container festlegen . Dadurch wird der notwendige Referenzpunkt für die oberste Position des untergeordneten Elements bereitgestellt.

Beispiel 1: Definieren einer Höhe

<div>

Durch Angabe einer Höhe von 200 Pixel für das übergeordnete Element div, die oberste Position des untergeordneten Div wird jetzt korrekt als 50 % von 200 Pixel berechnet, was zur erwarteten Vertikale führt Zentrierung.

Beispiel 2: Dehnen des Containers

Ein alternativer Ansatz besteht darin, den übergeordneten Container zu dehnen, um den gesamten verfügbaren Platz einzunehmen:

<div>

Durch Definieren der Eigenschaften „oben“, „unten“, „links“ und „rechts“ wird der Container erweitert, um den verfügbaren Platz auszufüllen. Die oberste Position des untergeordneten Divs wird dann relativ zum gestreckten Container berechnet, wodurch der gleiche Zentrierungseffekt erzielt wird.

Das obige ist der detaillierte Inhalt vonWarum zentriert „oben: 50 %' mein Element nicht vertikal, wenn „links: 50 %' ordnungsgemäß funktioniert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!