İki taşan divı dikey olarak nasıl hizalarım?

Question

Bir konteyner div içinde iki div var. Yüzmeye gerek yok, diğer yüzgeci sağa sola. Her ikisinin de ebeveynlerinin içinde dikey olarak merkezlenmeleri gerekir. Bunu nasıl başarabilirim? Hiçbir şamandıra ya da dikey olarak Ancak #right-box{ float: right; } ekleyerek bu css

.child{ display:inline-block; vertical-align:middle; } 

ile orta hizaya uygulanırsa

<div id='parent'> 
    <div id='left-box' class='child'>Some text</div> 
    <div id='right-box' class='child'>Details</div>  
</div> 

onların dikey hizalama kaybetmesine çocukları neden olur. Neyi yanlış yapıyorum?

Teşekkürler çocuklar

Answer 1

here yapıldığı Eğer

gerekli çözümün çevrimiçi demo: Burada

kod nasıl görünebileceğini gösteren bir örnek bu html ile:

<div id='parent'> 
    <div id='left-box' class='child'>Some text</div> 
    <div id='right-box' class='child'>Details</div>  
</div> 

ve bu css:

kodunuzu için çalışmıyor

#parent { 
    position: relative; 

    /* decoration */ 
    width: 500px; 
    height: 200px; 
    background-color: #ddd; 
} 

.child { 
    position: absolute; 
    top: 50%; 
    height: 70px; 
    /* if text is one-line, line-height equal to height set text to the middle */ 
    line-height: 70px; 
    /* margin-top is negative 1/2 of height */ 
    margin-top: -35px; 

    /* decoration */ 
    width: 200px; 
    text-align: center; 
    background-color: #dfd; 
}​ 

#left-box { left: 0; } 
#right-box { right: 0; } 

Answer 2

Sen ekranı deneyebilirsiniz: masa ve görüntü: tablo hücre stilleri.
Kontrol fazla ayrıntı http://www.quirksmode.org/css/display.html

NB için bu site dışarı: Eğer üst div yüksekliği (% 100 gibi) yüzde olmasını istiyorsanız, o zaman bu konteyner var yüksekliğine bağlı olacaktır. Eğer konteynır vücut ise, o zaman% 100 gibi vücudu ve html'nin yüksekliğini de ayarlamanız gerekecektir.

<div id='parent'> 
    <div id='left-box'>Some text</div> 
    <div id='right-box'>Details</div>  
</div>​ 

<style> 
body,html{ 
    height:100%; 
} 
#parent{ 
    border:1px solid red; 
    display:table; 
    height:100%; 
    width:100%;   
} 
#left-box{ 
    background-color:#eee; 
    display: table-cell; 
    vertical-align:middle; 
    padding:3px; 
    width:50%; 
} 
#right-box{ 
    background-color:#dddddd; 
    display: table-cell; 
    vertical-align:middle; 
    padding:3px; 
    width:50%; 
} 
​</style>