Kenar boşluğunun veya dolgu malzemesinin ana kapsayıcının yüksekliğinin yüzdesi olarak nasıl ayarlanır?

Question

Ben

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

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

aşağıdaki kullanarak css dikey hizalama yaratma üzerinde benim kafa yoran ve aşağıdaki div yapısını kullanılmaya başlanmış. Bu bu durumda çalışmaya gözükürken

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

, ben artmış ya da benim baz div genişliğini azaldığı zaman, dikey hizalama olasıca şeye şaşırdım. Padding-top özelliğini ayarladığımda, padding'i ana konteynerin yüksekliğinin bir yüzdesi olarak alacağını tahmin etmekteyiz, bu bizim durumumuzda temel olarak, ancak yukarıdaki yüzde 50'lik değer bir yüzde olarak hesaplanmaktadır. Genişlik. :(

yüksekliğinin yüzdesi olarak dolgu ve/veya marjı ayarlamak için bir yol JavaScript kullanarak başvurmadan, var mı?% 50 dolgu alışkanlık çocuğunuzu ortalamak

Answer 1

Ayrıca bu problemi de yaşadım (+1). Ciddi derecede sinirlendim, bunu yapmak aptalca.

düzeltme

evet dikey doldurma ve kenar genişliği göre olduğu, ancak top ve bottom değildir.

Dolayısıyla, sadece diğerinin içine bir div yerleştirin ve iç div Burada gerekli davranışını taklit için iki seçenek vardır

Answer 2

, aşağıda yerleştirecektir Gerçekten% 25'lik bir dolgu malzemesi kullanmak istediğinizi düşünüyorum.Yani içeriğiniz uzadıkça alanınız tükeniyor olabilir mi? Ayrıca, dolgu malzemesi yerine kenar boşluğu ayarlamayı denediniz mi?

EDIT : Nevermind, w3schools site diyor ki

% W dolguyu yüzde cinsinden belirtir. İçerdiği elemanın id'si, her zaman genişlik kullanır mı? Asla fark etmedim.

Yaptığınız şey ekran kullanılarak gerçekleştirilebilir: tablo olsa da (en azından modern tarayıcılarda). The technique is explained here.

Answer 3

(hala çalışmıyorsa position meseleleri unutmayın) top:50% gibi bir şey kullanın. Genel bir çözüm değil, bazı durumlarda yardımcı olabilir. Buradaki dikey boşluk, üst öğenin ebadına değil, dış öğenin boyutuna göre hesaplanır, ancak bu boyutun kendisi üst öğeye göreli olabilir ve bu şekilde aralık da görelidir.

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

İlk seçenek: burada sözde öğeler kullanıldı, burada dikey ve yatay boşluklar dış tarafa göreli. Dış eleman, yatay boşluk hareket Demo

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

dış Üst için göreceli yapar. Demo

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

İkinci seçenek: Mutlak konumlandırma kullanın.bir satır metni ortalamak için Demo

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

Answer 4

Diğer yoludur:

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

Answer 5

biraz farklı bir sorunuza yanıt: Sen hiç ped elemanlarına vh birimleri kullanabilirsiniz görüntü alanının merkezi:

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

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

Answer 6

Çocuk elemanının üst öğeden tamamen konumlandırılmasını sağlamak için üst öğede göreceli konumu ve alt öğede mutlak konumu ayarlamanız gerekir. Daha sonra çocuk elemanında 'üst' ebeveynin boyuna göre görülebilir. Yani, çocuğa kendi boyunun% 50'sini yukarı doğru "ç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>

başka esnek kutusunu kullanarak bir çözüm yoktur.

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

Sen her ikisi için avantaj/dezavantajlarını bulacaksınız

.