Marj kullanımı:dikey hizalama otomatik dıv
margin:0 auto;
edersek div yatay olarak ortala yapabileceğimizi biliyorum. margin:auto auto;
Bu nasıl iş ya nasıl çalışmalıdır? Dikey de ortalama?
Neden mi vertical-align:middle;
ya da çalışmıyor?
CEVAP
Kullanamazsın:
it's not applicable to block-level elements çünkü vertical-align:middle
their used values would compute as zero çünkü margin-top:auto
margin-bottom:auto
percentage-based margin values are calculated relative to the width of containing block çünkü margin-top:-50%
Aslında, belge akışı ve element height calculation algorythms doğası imkansız dikey olarak üst içinde bir öğe ortalamak için kenar boşluklarını kullanın. Her bir dikey kenar boşluğu değeri değişmiş olacak tetikleyici bir üst öğe yüksekliği yeniden hesaplama (akıtma), hangi sırayla tetiği yeniden Merkezi'nin özgün öğe... yapma bunu sonsuz bir döngü.
Kullanabilirsiniz:
Senaryonuz için çalışan A few workarounds like this:
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;}
.helper {
#position: absolute; /*a variation of an "lte ie7" hack*/
#top: 50%;
display: table-cell;
vertical-align: middle;}
.content {
#position: relative;
#top: -50%;
margin:0 auto;
width:200px;}
Üç elemanları gibi iç içe olmak zorunda:
<div class="container">
<div class="helper">
<div class="content"><!--stuff--></div>
</div>
</div>
Fiddled ve çalışır browsershot göre iyi.
Bir UİLabel içinde dikey hizalama...
Bir Div içinde dikey Hizalama...
bir div elemanların dikey hizalama...
dikey hizalama bootstrap 3 ile...
Android: çoklu Dikey hizalama çizgi Ed...