Wie erreicht man mithilfe prozentualer Höhen eine zuverlässige vertikale Ausrichtung in CSS?

Vertikale Ausrichtung in CSS unter Verwendung des Prozentsatzes der Höhe des übergeordneten Containers

Um eine vertikale Ausrichtung in CSS zu erreichen, haben Sie den folgenden Ansatz verwendet :

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  padding-top: 50%;
  height: 50%;
}

Obwohl dieser Ansatz zunächst vielversprechend war, erwies er sich beim Anpassen der Breite des .base-Div als problematisch und verursachte die vertikale Ausrichtung brechen. Dieses Verhalten ist auf die Tatsache zurückzuführen, dass padding-top als Prozentsatz der Breite und nicht wie erwartet als Höhe berechnet wird.

Lösung: Vertikale Eigenschaften verwenden

Zur Lösung Um dieses Problem zu lösen, können Sie vertikale CSS-Eigenschaften anstelle von padding-top nutzen. Diese Eigenschaften werden relativ zur Höhe des übergeordneten Elements definiert:

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  top: 50%;
  position: absolute;
}

Durch die Einstellung von top auf 50 % können Sie das innere .vert-align-Div effektiv vertikal innerhalb des .base-Containers zentrieren. Dieser Ansatz stellt sicher, dass die vertikale Ausrichtung unabhängig von der Breite von .base erhalten bleibt. Denken Sie daran, die Position des inneren Div auf „absolut“ zu setzen, damit dies korrekt funktioniert.

Das obige ist der detaillierte Inhalt vonWie erreicht man mithilfe prozentualer Höhen eine zuverlässige vertikale Ausrichtung in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!