html - 如何垂直对齐两个 float 的 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>

如果没有应用 float ，则它们与此 css 垂直对齐到中间

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

但是添加#right-box{ float: right; 导致 child 失去他们的垂直对齐。我做错了什么？

谢谢大家

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