css中的垂直對齊

Question

我正在使用bootstrap。 這是我正在使用的代碼示例。

<div class="row">
    <div class="col-lg-6"><img src="#" alt=""></div>
    <div class="col-lg-6">
        <h2>Heading</h2>
        <p>Some Text</p>
        <p>Some more text</p>
    </div>
</div>

那些p標簽有多行文字。 左邊的圖像比文本區域大得多，所以我希望這些元素垂直對齊。 這是我嘗試過的：

1. The table/table-cell trick.
2. The transform/Translatey trick.
3. Setting margin-top to 50% (didn't think that would work).
4. flex and align-items/justify-content.

問題是這個，父元素不會有高度，所以我在網上和通過StackOverflow找到的每個解決方案似乎都不適合我。 我很感激你的幫助。 任何幫助將不勝感激。

提前致謝

Answer 1

如果你可以將這些段落包裝成div那么你可以使用以下解決方案。 col-lg-6更改為col-xs-6只是為了在代碼片段中顯示左右布局。

 .outer { display: flex; align-items: stretch; } .middle { display: flex; align-items: center; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row outer"> <div class="col-xs-6 middle"><img src="https://s-media-cache-ak0.pinimg.com/236x/f6/16/d0/f616d044c7937dde2e8ec2b4f3e6f79c.jpg" alt=""></div> <div class="col-xs-6 middle"> <div class="inner"> <h2>Heading</h2> <p>Some Text</p> <p>Some more text</p> </div> </div> </div> </div>