9

コンテナ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; }と、子は垂直方向の配置を失います。私は何が間違っているのですか？

みんなありがとう

4

2 に答える 2

11

これがあなたが必要としたソリューションのオンラインデモです

ここに画像の説明を入力してください

それはこの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; }
于 2012-05-12T05:37:34.950 に答える
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>
于 2012-05-12T05:35:13.127 に答える