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

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

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

它是用这个 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

您可以尝试 display:table 和 display:table-cell 样式。
查看此站点以获取更多详细信息http://www.quirksmode.org/css/display.html

注意：如果您希望父 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%;
}
​&lt;/style>