Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Warum zentriert CSS „top: 50 %' nicht immer Elemente?

Mary-Kate Olsen
Freigeben: 2024-11-19 02:24:03
Original
972 Leute haben es durchsucht

Why Does CSS `top: 50%` Not Always Center Elements?

CSS Top Percent nicht wie erwartet ausgerichtet

In responsiven CSS-Layouts kann es manchmal zu unerwartetem Verhalten kommen, wenn die Top-Eigenschaft mithilfe von Prozentsätzen festgelegt wird, während die Left Die Immobilie funktioniert wie vorgesehen. Dies liegt an der Art und Weise, wie Prozentsätze im Verhältnis zu den Abmessungen des übergeordneten Containers berechnet werden.

Relative Positionierung verstehen

Beim Festlegen von oberen oder linken Prozentsätzen für absolut positionierte Elemente ist dies der Fall Es ist wichtig, eine definierte Höhe und/oder Breite für den übergeordneten Container zu haben. Dies liegt daran, dass die Prozentsätze basierend auf den Abmessungen des übergeordneten Elements berechnet werden.

Lösung: Definieren Sie die Abmessungen des übergeordneten Containers

Damit top:50 % wie erwartet funktioniert, Sie müssen die Höhe des übergeordneten Containers angeben. Dadurch kann der Browser den Mittelpunkt des Containers genau berechnen und das untergeordnete Element entsprechend positionieren.

Wenn Sie beispielsweise den übergeordneten Container wie folgt definieren:

<div>
Nach dem Login kopieren
Nach dem Login kopieren

Dann das untergeordnete Element Element mit Oberseite:50%; wird vertikal in der Mitte des übergeordneten Containers positioniert.

Alternative Lösung: Übergeordneten Container dehnen

Eine andere Möglichkeit besteht darin, den übergeordneten Container zu dehnen, um seinen enthaltenden Raum auszufüllen die Eigenschaften oben, unten, links und rechts. Mit dieser Methode kann die top:50%-Eigenschaft auch das untergeordnete Element in der Mitte ausrichten:

<div>
Nach dem Login kopieren
Nach dem Login kopieren

Durch die Bereitstellung klarer Abmessungen oder das Strecken des übergeordneten Containers können Sie sicherstellen, dass top:50% für die Reaktionsfähigkeit korrekt funktioniert CSS-Layouts, die eine präzise Positionierung untergeordneter Elemente ermöglichen.

Das obige ist der detaillierte Inhalt vonWarum zentriert CSS „top: 50 %' nicht immer Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage