Wie wird der Rand oder die Polsterung als Prozentsatz der Höhe des übergeordneten Containers festgelegt?

Ich hatte mir den Kopf zerbrochen, um eine vertikale Ausrichtung in CSS zu erstellen

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

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

<!-- and used the following div structure. -->

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

Während dies für diesen Fall zu funktionieren schien, war ich überrascht, dass die vertikale Ausrichtung einrasten würde, wenn ich die Breite meines Basis-Div vergrößerte oder verkleinerte. Ich hatte erwartet, dass beim Festlegen der Eigenschaft padding-top das Auffüllen als Prozentsatz der Höhe des übergeordneten Containers verwendet wird, was in unserem Fall die Basis ist, aber der obige Wert von 50 Prozent wird als Prozentsatz von berechnet Breite. :((

Gibt es eine Möglichkeit, die Auffüllung und / oder den Rand als Prozentsatz der Höhe festzulegen, ohne JavaScript zu verwenden?

Die Lösung ist , dass ja, senkrechte Polsterung und Rand - zu - Breite relativ ist, aber , topund bottom ist es nicht.

Platzieren Sie also einfach ein Div in einem anderen und verwenden Sie im inneren Div etwas wie top:50%(denken positionSie daran , wenn es immer noch nicht funktioniert).

Eine Antwort auf eine etwas andere Frage: Sie können vhEinheiten verwenden, um Elemente in der Mitte des Ansichtsfensters aufzufüllen :

.centerme {
    margin-top: 50vh;
    background: red;
}

<div class="centerme">middle</div>

Hier sind zwei Optionen, um das erforderliche Verhalten zu emulieren. Keine allgemeine Lösung, kann aber in einigen Fällen hilfreich sein. Der vertikale Abstand wird hier auf der Grundlage der Größe des äußeren Elements berechnet, nicht seines übergeordneten Elements. Diese Größe selbst kann jedoch relativ zum übergeordneten Element sein, und auf diese Weise wird auch der Abstand relativ.

<div id="outer">
    <div id="inner">
        content
    </div>
</div>

Erste Option: Verwenden Sie Pseudoelemente, hier sind der vertikale und der horizontale Abstand relativ zum äußeren. Demo

#outer::before, #outer::after {
    display: block;
    content: "";
    height: 10%;
}
#inner {
    height: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

Wenn Sie den horizontalen Abstand zum äußeren Element verschieben, wird er relativ zum übergeordneten Element des äußeren Elements. Demo

#outer {
    padding-left: 10%;
    padding-right: 10%;
}

Zweite Option: Absolute Positionierung verwenden. Demo

#outer {
    position: relative;
}
#inner {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
}

Um das untergeordnete Element absolut von seinem übergeordneten Element zu positionieren, müssen Sie die relative Position auf dem übergeordneten Element UND die absolute Position auf dem untergeordneten Element festlegen.

Dann ist 'top' auf dem untergeordneten Element relativ zur Höhe des übergeordneten Elements. Sie müssen also auch das Kind 50% seiner eigenen Größe nach oben "übersetzen".

.base{
    background-color: green;
    width: 200px;
    height: 200px;
    overflow: auto;
    position: relative;
}
    
.vert-align {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

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

Es gibt eine andere Lösung mit Flexbox.

.base{
    background-color:green;
    width: 200px;
    height: 200px;
    overflow: auto;
    display: flex;
    align-items: center;
}

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

Sie finden Vor- und Nachteile für beide.

Dies kann mit der writing-modeEigenschaft erreicht werden. Wenn Sie ein Element writing-modeauf einen vertikalen Schreibmodus einstellen , zvertical-lr werden die Prozentwerte seiner Nachkommen für Auffüllen und Rand in beiden Dimensionen relativ zur Höhe anstatt zur Breite.

Aus der Spezifikation :

. . . Prozentsätze der Rand- und Polsterungseigenschaften, die immer in Bezug auf die Breite des enthaltenen Blocks in CSS2.1 berechnet werden, werden in Bezug auf die Inline-Größe des enthaltenen Blocks in CSS3 berechnet .

Die Definition der Inline-Größe :

Eine Messung in der Inline-Dimension: Bezieht sich auf die physische Breite (horizontale Dimension) in horizontalen Schreibmodi und auf die physische Höhe (vertikale Dimension) in vertikalen Schreibmodi.

Beispiel mit einem veränderbaren Element, bei dem horizontale Ränder relativ zur Breite und vertikale Ränder relativ zur Höhe sind.

.resize {
  width: 400px;
  height: 200px;
  resize: both;
  overflow: hidden;
}

.outer {
  height: 100%;
  background-color: red;
}

.middle {
  writing-mode: vertical-lr;
  margin: 0 10%;
  width: 80%;
  height: 100%;
  background-color: yellow;
}

.inner {
  writing-mode: horizontal-tb;
  margin: 10% 0;
  width: 100%;
  height: 80%;
  background-color: blue;
}

<div class="resize">
  <div class="outer">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>
</div>

Die Verwendung eines vertikalen Schreibmodus kann besonders nützlich sein, wenn das Seitenverhältnis eines Elements konstant bleiben soll, die Größe jedoch in Abhängigkeit von seiner Höhe anstelle der Breite skaliert werden soll.

Eine andere Möglichkeit, einen Zeilentext zu zentrieren, ist:

.parent{
  position: relative;
}

.child{
   position: absolute;
   top: 50%;
   line-height: 0;
}

oder nur

.parent{
  overflow: hidden; /* if this ins't here the parent will adopt the 50% margin of the child */
}

.child{
   margin-top: 50%;
   line-height: 0;
}

Eine 50% ige Polsterung zentriert Ihr Kind nicht, sondern platziert es unterhalb der Mitte. Ich denke, Sie wollen wirklich eine Polsterung von 25%. Vielleicht geht Ihnen gerade der Speicherplatz aus, wenn Ihre Inhalte größer werden? Haben Sie auch versucht, die Randoberseite anstelle der Polsteroberseite festzulegen?

EDIT: Nevermind, heißt es auf der Website von w3schools

% Gibt den Abstand in Prozent der Breite des enthaltenen Elements an

Vielleicht verwendet es immer die Breite? Ich hatte es nie bemerkt.

Was Sie tun, kann jedoch mit display: table erreicht werden (zumindest für moderne Browser). Die Technik wird hier erklärt .

Dies ist ein sehr interessanter Fehler. (Meiner Meinung nach ist es sowieso ein Fehler) Netter Fund!

In Bezug auf, wie es zu setzen, würde ich Camilo Martin Antwort empfehlen. Aber warum , ich würde das gerne ein bisschen erklären, wenn es euch nichts ausmacht.

In den CSS-Spezifikationen fand ich:

'padding'
Prozentsätze: beziehen sich auf die Breite des enthaltenen Blocks

… Was komisch ist, aber okay.

Mit einem Elternteil width: 210pxund einem Kind padding-top: 50%erhalte ich einen berechneten / berechneten Wert von padding-top: 96.5px- was nicht der erwartete Wert ist 105px.

Dies liegt daran, dass in Windows (ich bin mir bei anderen Betriebssystemen nicht sicher) die Größe der gängigen Bildlaufleisten standardmäßig 17px × 100%(oder 100% × 17pxfür horizontale Balken) ist. Diese 17pxwerden vorher abgezogen Berechnung des 50%daher50% of 193px = 96.5px .