垂直對齊到另一個div的動態高度？

Question

我想垂直對齊一個div到相鄰的高度動態的div。

我遇到的大多數方法都要求我知道父div的高度。但是如果你看到我的例子，那就是驅動整個部分高度的「正確的」div。

我想讓div「left」的文本垂直居中顯示在右邊的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/