CSSでの垂直配置

Question

私はブートストラップを使用しています。ここで私が使用しているコードのサンプルです。

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