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

  • Canceriansoul

    Canceriansou

    15 Ocak 2011
  • Cole Rolland

    Cole Rolland

    23 Kasım 2008
  • TrenchTech Computer Repair Tutorials

    TrenchTech C

    19 EYLÜL 2014