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ş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Jeremy Stark

    Jeremy Stark

    23 Mayıs 2010
  • Jordie Jordan

    Jordie Jorda

    27 Ocak 2008
  • TWiT Netcast Network

    TWiT Netcast

    27 EKİM 2005