Html 如何垂直对齐两个浮动div？

在一个容器div中有两个div。一个需要向左浮动，另一个需要向右浮动。它们还都需要在父对象内垂直居中。我怎样才能做到这一点

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

但是，添加

#right box{float:right；}

会导致子对象失去垂直对齐。我做错了什么

---

谢谢大家

您可以尝试显示：表格和显示：表格单元格样式
查看此网站以了解更多详细信息

注意：如果希望父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>

一些文本
细节
​
正文，html{
身高：100%；
}
#母公司{
边框：1px纯红；
显示：表格；
身高：100%；
宽度：100%；
}
#左框{
背景色：#eee；
显示：表格单元格；
垂直对齐：中间对齐；
填充：3倍；
宽度：50%；
}
#右框{
背景色：#dddddd；
显示：表格单元格；
垂直对齐：中间对齐；
填充：3倍；
宽度：50%；
}
​

是您所需解决方案的在线演示

它是用以下html制作的：

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

---

您的代码无法垂直对齐到中间好的，谢谢您的检查，不确定我以前是如何处理的，您能帮我将div垂直定位到中间，左浮动表示

#左框

，右浮动表示

#右框

？你会用什么css？谢谢你们的努力，你们真的很棒！我喜欢成为这样一个热情社区的一部分。

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