Vertikal auf eine dynamische Höhe von einem anderen div ausrichten?

Question

Ich versuche, ein div mit dem benachbarten div, das in der Höhe dynamisch ist, vertikal auszurichten.

Die meisten Methoden, auf die ich gestoßen bin, erfordern, dass ich die Höhe des Elternteils kenne. Aber wenn Sie mein Beispiel sehen, ist es das "richtige" div, das die Höhe des gesamten Abschnitts antreibt.

Ich versuche, den Text von Div "links" vertikal mit dem div auf der rechten Seite erscheinen zu lassen. Das "Eltern" -Div hat auch keine feste Höhe.

Wie kann ich das tun, idealerweise mit CSS?

Danke.

Mein Beispiel:

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

Answer 1

Manchmal Box-Modell CSS nicht für diese Arbeit, so können Sie mit dem guten alten Tischmodell zurück. (Um nicht zu sagen, müssen Sie Ihr Markup anpassen).

Werfen Sie einen Blick auf display: table, display: table-cell und vertical-align: middle.

ich die Geige aktualisiert: http://jsfiddle.net/McVAE/18/

Answer 2

Hallo Sie die einige Eigenschaften in CSS als ähnliche

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 ersetzen kann

<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/