मैं दो फ़्लोटेड divs को लंबवत रूप से संरेखित कैसे कर सकता हूं?

Question

मेरे पास एक कंटेनर div के अंदर दो divs हैं। एक दूसरे को तैरने के लिए तैरने की जरूरत है। उन्हें दोनों को अपने माता-पिता के अंदर लंबवत केंद्रित होना चाहिए। इसे कैसे प्राप्त किया जा सकता है?

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

कोई नाव या तो वे खड़ी इस सीएसएस

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

हालांकि #right-box{ float: right; } को जोड़ने के साथ बीच में संरेखित करने के लिए लागू किया जाता है तो बच्चों को उनके लंबवत संरेखण खोने के लिए कारण बनता है। मैं क्या गलत कर रहा हूं?

धन्यवाद लोग

Answer 1

here समाधान आप

जरूरत की ऑनलाइन डेमो यह बनाया गया था:

यहाँ कोड दिखाई देती हैं इसका एक उदाहरण है इस एचटीएमएल के साथ:

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

और इस सीएसएस:

#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

आप प्रदर्शन की कोशिश कर सकते हैं: तालिका और प्रदर्शन: तालिका सेल शैलियों।
चेक अधिक जानकारी के http://www.quirksmode.org/css/display.html

एनबी के लिए इस साइट बाहर: यदि आप माता पिता div ऊंचाई (100%) की तरह एक प्रतिशत होना चाहते हैं, तो यह ऊंचाई की यह कंटेनर के सापेक्ष किया जाएगा। यदि कंटेनर शरीर है, तो आपको शरीर और एचटीएमएल की ऊंचाई भी 100% की तरह सेट करना होगा।

<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>