Jak mogę wyrównać w pionie dwa pływające elementy div?

Question

Mam dwa div wewnątrz div pojemnika. Trzeba opuścić lewy drugi pływak w prawo. Oba muszą być pionowo wyśrodkowane wewnątrz rodzica. Jak mogę to osiągnąć?

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

Jeśli pływak nie jest stosowany albo one pionowo wyrównać do środka z tym css

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

Jednak dodanie #right-box{ float: right; } powoduje, że dzieci tracą pionowe wyrównanie. Co ja robię źle?

Dzięki chłopaki

Answer 1

here jest demo online roztworze Ci potrzebne

to było robione z tym html:

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

i tego css:

#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

można spróbować style wyświetlania: table-cell: stół i wyświetlacz.
Sprawdź to miejsce na więcej szczegółów http://www.quirksmode.org/css/display.html

UWAGA: Jeśli chcesz rodzic wysokość div być procent (jak 100%), to będzie w stosunku do wysokości To pojemnik. Jeśli pojemnik jest ciałem, to musisz także ustawić ciało i wysokość html, jak na 100%.

Oto przykład tego, co kod może wyglądać następująco:

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