Nasıl divs dikey olarak hizalamak için?

SORU

30 NİSAN 2010, Cuma

Nasıl divs dikey olarak hizalamak için?

Küçük bir kullanıcı adı ve parola giriş kutusu için çalışıyorum.

Sormak istiyorum, nasıl dikey bir div align musunuz?

Ben ne var:

<div id="Login" class="BlackStrip floatright">
   <div id="Username" class="floatleft">Username<br>Password</div>
   <div id="Form" class="floatleft">
   <form action="" method="post">
      <input type="text" border="0"><br>
      <input type="password" border="0">
   </form>
   </div>
</div>

Nasıl ıd Kullanıcı adı ve Form div dikey merkezine sağlamakla yapabilir miyim? Vermeye çalıştım:

vertical-align: middle;

oturum Açma kimliği ile div CSS, ama işe yaramıyor. Herhangi bir yardım mutluluk duyacağız.

CEVAP

27 Aralık 2013, Cuma

Dikey olarak diğer div içinde bir div align edebilirsiniz. Bunun için example on fiddle bu gibi css tanımlamanız gerekir. Sadece bakın dikey outerDiv bir innerDiv align küçük bir demo.

HTML

<div class="outerDiv">
    <div class="innerDiv"> My Vertical Div </div>
</div>

CSS

.outerDiv {
    display: inline-flex;  <== This is responsible for vertical alignment
    height: 400px;
    background-color: red;
    color: white;
}

.innerDiv {
    margin: auto 5px;   <== This is responsible for vertical alignment
    background-color: green;   
}

8* *sınıf marjı margin: auto *px; gibi olmalı

[* istediğiniz bir değer olabilir.]

display: inline-flex özelliği(güncel sürüm/güncelleme) HTML5 destekleyen tarayıcılarda son desteklenir.

Her zaman dikey olarak hizalamak dıv (yani innerDiv) başka uyumluluk sorunu için yüksekliği tanımlamak için deneyin.

Bunu Paylaş: