Warum schlägt die prozentuale vertikale Auffüllung fehl und wie kann ich prozentuale Höhen für die vertikale Ausrichtung in CSS verwenden?

So steuern Sie den Abstand und den Rand mithilfe des Prozentsatzes der Höhe des übergeordneten Containers

In CSS kann die vertikale Ausrichtung mithilfe des oberen Bereichs des Abstands gesteuert werden Eigentum. Das Festlegen dieser Eigenschaft als Prozentsatz der Breite des übergeordneten Containers anstelle der Höhe kann jedoch zu unerwünschtem Verhalten führen.

Ursprünglicher Versuch:

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

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

Unerwartet Verhalten:

Beim Ändern der Breite des .base-Containers rastete die vertikale Ausrichtung ein, obwohl padding-top wurde als Prozentsatz festgelegt. Dies liegt daran, dass der vertikale Abstand und der Rand als Prozentsatz der Breite des übergeordneten Containers berechnet werden.

Lösung:

Anstatt padding-top zu verwenden, verwenden Sie die top-Eigenschaft, um Steuern Sie die vertikale Ausrichtung. top wird als Prozentsatz der Höhe des übergeordneten Containers berechnet.

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

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

Diese verschachtelte Div-Struktur platziert ein untergeordnetes Div innerhalb des übergeordneten Containers und richtet es vertikal aus:

<div class="base">
  <div class="vert-align">
    Content Here
  </div>
</div>

Durch Verwendung von top Anstelle von padding-top wird das untergeordnete Div unabhängig von seiner Breite 50 % unterhalb der Oberseite seines übergeordneten Containers positioniert. Dies gewährleistet eine vertikale Ausrichtung, auch wenn sich die Breite des übergeordneten Elements ändert.

Das obige ist der detaillierte Inhalt vonWarum schlägt die prozentuale vertikale Auffüllung fehl und wie kann ich prozentuale Höhen für die vertikale Ausrichtung in CSS verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!