wake-up-neo.com

Wie kann der Rand oder der Abstand als Prozentsatz der Höhe des übergeordneten Containers festgelegt werden?

Ich hatte mir die Mühe gemacht, 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%;
}

und verwendete die folgende div-Struktur.

<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 bei einer Vergrößerung oder Verkleinerung meines Basisdivits einrastet. Ich habe damit gerechnet, dass ich beim Festlegen der padding-top -Eigenschaft die Auffüllung als Prozentsatz der Höhe des übergeordneten Containers verwenden würde, was in unserem Fall die Basis ist. Der oben genannte Wert von 50% wird jedoch als Prozentsatz des Werts berechnet Breite. :(

Gibt es eine Möglichkeit, den Abstand und/oder den Abstand in Prozent der Höhe festzulegen, ohne auf JavaScript zurückgreifen zu müssen? 

199
Ryan

Die Korrektur besteht darin, dass die vertikale Polsterung und der Rand relativ zur Breite sind, aber top und bottom nicht.

Platziere also einfach ein Div in ein anderes und benutze in dem inneren Div so etwas wie top:50% (denk dran, position ist wichtig, wenn es immer noch nicht funktioniert)

209
Camilo Martin

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

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

Erste Möglichkeit: Verwenden Sie Pseudo-Elemente, hier sind vertikale und horizontale Abstände relativ zu den ä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 Möglichkeit: absolute Positionierung verwenden. Demo

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

Eine Antwort auf eine etwas andere Frage: Sie können vh -Einheiten verwenden, um Elemente in der Mitte des viewport aufzufüllen.

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

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

Damit das untergeordnete Element absolut vom übergeordneten Element positioniert wird, müssen Sie die relative Position des übergeordneten Elements UND die absolute Position des untergeordneten Elements festlegen. 

Dann ist auf dem untergeordneten Element 'top' relativ zur Höhe des übergeordneten Elements. Sie müssen das Kind also 50% seiner eigenen Höhe 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, die Flexbox verwendet.

.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 Vorteile/Nachteile für beide.

10
alain

Eine andere Möglichkeit, einen einzeiligen Text 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;
}
3
rawiro

Eine 50% Polsterung zentriert Ihr Kind nicht, es wird es unterhalb der Mitte platziert. Ich glaube, Sie wollen wirklich ein Top von 25%. Möglicherweise haben Sie nur noch zu wenig Speicherplatz, da Ihre Inhalte immer größer werden. Haben Sie auch versucht, die Randabdeckung anstelle der Polsterabdeckung einzustellen?

EDIT: Nevermind, sagt die w3schools-Site 

% Gibt die Auffüllung in Prozent der Breite des enthaltenden Elements an

Vielleicht nutzt es also immer Breite? Ich habe es nie bemerkt.

Was Sie tun, können Sie mit display: table (zumindest für moderne Browser) erreichen. Die Technik wird hier erklärt .

1
SpliFF

Dies kann mit der Eigenschaft writing-mode erreicht werden. Wenn Sie den writing-mode eines Elements auf einen vertikalen Schreibmodus setzen, z. B. vertical-lr, werden die prozentualen Werte für die Auffüllung und den Rand der untergeordneten Elemente in beiden Dimensionen relativ zur Höhe anstelle der Breite.

Aus der Spezifikation :

. . . Prozentwerte der Margin- und Padding-Eigenschaften, die in CSS2.1 immer in Bezug auf die Breite des enthaltenden Blocks berechnet werden, werden in CSS3 in Bezug auf die Inline-Größe des enthaltenden Blocks berechnet.

Die Definition von Inline-Größe :

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

Beispiel, mit einem anpassbaren 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 Bezug auf die Höhe statt auf die Breite skaliert werden soll.

1
James T

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

In Bezug auf wie würde ich Camilo Martins Antwort empfehlen. Was warum angeht, möchte ich das ein wenig erläutern, wenn es euch nichts ausmacht.


In die CSS-Angaben habe ich gefunden:

'padding'
Prozente: beziehen sich auf die Breite des enthaltenden Blocks

… Was seltsam ist, aber okay.

Mit einem übergeordneten width: 210px und einem untergeordneten padding-top: 50% erhalte ich einen berechneten/berechneten Wert von padding-top: 96.5px - der nicht der erwartete 105px ist.

Dies liegt daran, dass in Windows (ich bin mir nicht sicher, was andere Betriebssysteme angeht) die Größe der allgemeinen Bildlaufleisten standardmäßig 17px × 100% (oder 100% × 17px für horizontale Balken) ist. Diese 17px werden von vorher abgezogen und berechnen 50%, also 50% of 193px = 96.5px.

0
WoodrowShigeru