2つの浮動小数点divをどのように垂直に整列できますか？

Question

コンテナdiv内に2つの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％など）パーセントになりたい場合は、それはそれは、コンテナの高さからの相対になります。コンテナがボディの場合は、bodyと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>