¿Cómo puedo alinear verticalmente dos divs flotantes?

Question

Tengo dos divs dentro de un contenedor div. Uno debe flotar a la izquierda del otro carro derecho. También ambos deben estar centrados verticalmente dentro de su padre. ¿Cómo puedo conseguir esto?

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

Si no se aplica a cualquiera de flotador que se alinean verticalmente a la mitad con esta css

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

Sin embargo la adición de #right-box{ float: right; } hace que los niños pierdan su alineación vertical. ¿Qué estoy haciendo mal?

Gracias chicos

Answer 1

here es la demostración en línea de la solución que necesitaba

que se hizo con este html:

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

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

Puede probar la pantalla: mesa y la pantalla: table-cell estilos.
este sitio hacia fuera para más detalles http://www.quirksmode.org/css/display.html

Nota: si desea que la altura div padre a ser un porcentaje (como 100%), entonces será con relación a la altura de su contenedor. Si el contenedor es el cuerpo, entonces tendrás que configurar el cuerpo y la altura del html también, como al 100%.

He aquí un ejemplo de lo que el código podría ser:

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