別のdivの動的な高さに垂直に整列しますか？

Question

1つのdivを、その高さが動的な隣接divに垂直に整列しようとしています。

私が遭遇したほとんどの方法では、親divの高さを知る必要があります。しかし、私の例を見れば、それはセクション全体の高さを駆動する "正しい" divです。

divのテキストを右に表示されているdivの中央に縦に表示しようとしています。 「親」divの高さが固定されていません。

私はこれを、理想的にはCSSで行うことができますか？

ありがとうございました。

私の例：

http://jsfiddle.net/halogenmobile/McVAE/9/

Answer 1

時にはCSSのボックスモデルは、このために動作しませんので、あなたは古き良きテーブルモデルに戻すことができます。 （マークアップを調整する必要はありません）。

display: table,display: table-cellおよびvertical-align: middleをご覧ください。

私はフィドル更新：http://jsfiddle.net/McVAE/18/

Answer 2

をこんにちは、あなたがこのようなとしてCSSのプロパティの一部を置き換えることが

のCss

.parent{ 
    border: 1px solid red; 
    padding: 2px; 
    width: 500px; 
    text-align: center; 
    display: table; 
} 
.parent p.p1{ 
    font-size: 20px; 
} 
.left{ 
    display: table-cell; 
    vertical-align: middle; 
    border: 1px solid green; 
    width: 30%; 
} 
.right{ 
    display: table-cell; 
    border: 1px solid blue; 
    width: 69%; 
} 

HTML

<div class="parent"> 
    <div class="left"> 
     <p class="p1">Vertically</p> 
     <p>Center me to the box on my right, please</p> 
    </div> 
    <div class="right"> 
     <p>I can be</p> 
     <p>variable</p> 
     <p>number</p> 
     <p>of</p> 
     <p>lines</p> 
     <p>and I</p> 
     <p>determine</p> 
     <p>the height</p> 
     <p>of everything</p> 
     <p>here</p> 

    </div> 
</div> 

Live Demo here http://jsfiddle.net/rohitazad/McVAE/73/