如何垂直对齐两个浮动的div？ [英] How can I vertically align two floated divs?

问题描述

我在容器div里面有两个div。需要向左浮动另一个浮动。它们也都需要在父级内部垂直居中。如何实现这一目标？

I have two divs inside a container div. One need to float left the other float right. They also both need to be vertically centered inside their parent. How can I achieve this?

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

如果没有应用浮动，则它们与这个css

If no float is applied to either they vertically align to the middle with this css

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

但是添加＃right-box {float：right; } 会导致孩子失去垂直对齐。我做错了什么？

However adding #right-box{ float: right; } causes the children to lose their vertical alignment. What am I doing wrong?

感谢伙伴

推荐答案

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

here is the online demo of the solution you needed

>

使用此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; }

这篇关于如何垂直对齐两个浮动的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！