Как я могу вертикально выровнять два плавающих divs?

Question

У меня есть два div внутри контейнера div. Нужно поплавать, оставив другой плавать вправо. Они также должны быть вертикально центрированы внутри своего родителя. Как я могу это достичь?

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

Если ни с плавающей точкой не применяются либо они вертикальное выравнивание к середине с этим CSS

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

Однако добавлением #right-box{ float: right; } вызывает ребенок теряет вертикальное выравнивание. Что я делаю не так?

Спасибо ребята

Answer 1

here является онлайн демо решения, что вам необходимо

это было сделано с этим html:

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

и это 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

Вы можете попробовать дисплей: стол и дисплей: стол-клеточные типы.
Проверьте этот сайт для большего количества деталей http://www.quirksmode.org/css/display.html

NB: если вы хотите, чтобы высота родительского DIV быть процентов (например, 100%), то это будет по отношению к высоте в это контейнер. Если контейнер является телом, вам также нужно будет установить тело и высоту html, например, на 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>