Kenar boşluğunu veya dolguyu ana kabın yükseklik yüzdesi olarak nasıl ayarlayabilirim?

Aşağıdaki kullanarak css dikey bir hizalama oluşturmak üzerinde beyin rafa olmuştu

.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>

Bu durum bu işe yaramış gibi görünse de, temel div'imin genişliğini artırdığımda veya azalttığımda dikey hizalamanın yakalanacağına şaşırdım. Dolgu üst özelliğini ayarladığımda, dolguyu bizim durumumuzda temel olan ana kabın yüksekliğinin bir yüzdesi olarak alacağını bekliyordum, ancak yukarıdaki yüzde 50 değerinin, Genişlik. :(

JavaScript kullanmaya başvurmadan dolgu ve / veya kenar boşluğunu yüksekliğin yüzdesi olarak ayarlamanın bir yolu var mı?

Düzeltme evet dikey dolgu ve marj genişliği göredir, fakat olmasıdır topve bottom değillerdir.

Öyleyse sadece bir div'ı diğerinin içine yerleştirin ve iç div'e bir şey kullanın top:50%( positionhala işe yaramazsa konuları hatırlayın )

Biraz farklı bir sorunun cevabı: vhÖğeleri görünümün merkezine yerleştirmek için birimleri kullanabilirsiniz :

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

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

İşte gerekli davranışı taklit etmek için iki seçenek. Genel bir çözüm değildir, ancak bazı durumlarda yardımcı olabilir. Buradaki dikey aralık, üst öğesinin değil, dış öğenin boyutuna göre hesaplanır, ancak bu boyutun kendisi üst öğeye göre olabilir ve bu şekilde aralık da göreli olacaktır.

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

İlk seçenek: sözde elemanlar kullanın, burada dikey ve yatay boşluklar dışa göredir. gösteri

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

Yatay boşluğun dış elemana taşınması, dış elemanın ebeveyni ile orantılıdır. gösteri

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

İkinci seçenek: mutlak konumlandırma kullanın. gösteri

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

Alt öğeyi kesinlikle üst öğesinden konumlandırmak için üst öğede göreli konum ve alt öğede mutlak konum ayarlamanız gerekir.

Daha sonra alt elemanda 'üst' ebeveynin yüksekliğine göredir. Bu yüzden çocuğa kendi yüksekliğinin% 50'sini 'çevirmeniz' gerekir.

.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>

Esnek kutu kullanan başka bir çözüm daha var.

.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>

Her ikisi için de avantajlar / dezavantajlar bulacaksınız.

Bu writing-modeözellik ile elde edilebilir . Bir öğeyi writing-modedikey olarak yazma moduna ayarlarsanız, alt öğelerinin vertical-lrdolgu ve kenar boşluğu için yüzde değerleri, her iki boyutta da, genişlik yerine yüksekliğe göre olur.

Gönderen spec :

. . . her zaman CSS2.1'deki taşıyıcı blok genişliğine göre hesaplanan kenar boşluğu ve dolgu özellikleri yüzdeleri, CSS3'teki taşıyıcı bloğun satır içi boyutuna göre hesaplanır .

Satır içi boyut tanımı :

Satır içi boyuttaki bir ölçüm: yatay yazma modlarındaki fiziksel genişliği (yatay boyut) ve dikey yazma modlarındaki fiziksel yüksekliği (dikey boyut) ifade eder.

Örneğin, yatay kenar boşluklarının genişliğe ve dikey kenar boşluklarının yüksekliğe göreli olduğu yeniden boyutlandırılabilir bir öğe ile.

.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>

Dikey yazma modunun kullanılması, bir öğenin en boy oranının sabit kalmasını istediğiniz, ancak boyutunun genişlik yerine yüksekliğine göre ölçeklendirilmesini istediğiniz durumlarda özellikle yararlı olabilir.

Bir satır metnini ortalamanın diğer bir yolu:

.parent{
  position: relative;
}

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

ya da sadece

.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;
}

% 50 dolgu çocuğunuzu ortalamayacak, merkezin altına yerleştirecektir. Bence gerçekten% 25'lik bir dolgu istiyorsun. Belki de içeriğiniz arttıkça alanınız azalıyor? Ayrıca dolgu yerine kenar boşluğunu ayarlamayı denediniz mi?

EDIT: Nevermind, w3schools sitesi diyor

% Dolguyu içeren öğenin genişliğinin yüzdesi olarak belirtir

Belki de her zaman genişlik kullanır? Hiç fark etmemiştim.

Yaptığınız şey display: table olsa da (en azından modern tarayıcılar için) elde edilebilir. Teknik burada açıklanmaktadır .

Bu çok ilginç bir hata. (Bence, yine de bir hata) Güzel bulmak!

İlgili nasıl ayarlamak için, ben Camilo Martin'in cevabı öneriyoruz. Ama neden olarak , umursamıyorsanız bunu biraz açıklamak istiyorum.

Gelen CSS özellikleri buldum:

'dolgu'
Yüzdeleri: taşıyıcı blok genişliğine bakınız

… Bu garip, ama tamam.

Böylece, bir ebeveyn width: 210pxve bir çocukla padding-top: 50%, hesaplanan / hesaplanan bir değer elde ediyorum padding-top: 96.5px- ki bu beklenmiyor 105px.

Çünkü Windows'ta (diğer işletim sistemlerinden emin değilim), ortak kaydırma çubuklarının boyutu varsayılan olarak 17px × 100%(veya 100% × 17pxyatay çubuklar için). Bu nedenle, 17pxbunlar hesaplanmadan önce çıkarılır .50%50% of 193px = 96.5px