テキストの縦方向の整列 - ブートストラップ

Question

画像の横にあるdivの中央にテキストを置く必要がある状況があります。

<div class="row"> 

      <div class="col-xs-10 col-xs-offset-1 col-md-3 col-md-offset-1"> 

       <img class="img-responsive" src="../../assets/img/partner-logos/start-up-loans-logo.png" width="270" height="270" alt=""/> 

      </div> 

      <div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0"> 

       <p>The Start Up Loans Company are a subsidiary of the British Business Bank and deliver the Government’s Start Up Loans programme providing finance and support for businesses who struggle to access other forms of finance.</p> 

       <p>For more information about the Start Up Loans Company, click here.</p> 

      </div> 

      <div class="clearfix"></div> 

      <div class="col-xs-10 col-xs-offset-1 col-md-3 col-md-offset-1"> 

       <img class="img-responsive" src="../../assets/img/partner-logos/business-finance-solutions-logo.png" width="270" height="270" alt=""/> 

      </div> 

      <div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0"> 

       <p>The Enterprise Loan Fund Ltd (trading as Business Finance Solutions) are an official Finance Partners who are responsible for administering the loan agreements and funds to successful applicants. They are the key point of contact for any matters relating to loan administration and repayments.</p> 

       <p>For more information about Business Finance Solutions, click here</p> 



      </div> 


     </div> 

私はお互いに次の画像やテキストを配置するためにブートストラップグリッドレイアウトを使用している見ることができるように。

私は当初、行自体にフレックスボックスを使用した垂直センタリングト​​リックを使用しようとしましたが、これは小さなビューポートでイメージの下にテキストが移動するのを防ぎます。 <div class="row vertical-center"></div>

生産：

これは

.vertical-center { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    align-items: center; 
} 

は、だから私が持っていたクラスだったあなたは、これが所望の間隔を生産したが、自然をノックアウト見ることができるように

要素の流れ。

私は余裕を使うことができますが、これを計算する方法があるので、画像のサイズに応じて余白を手動で設定する必要はありません。

Answer 1

以下のコードを試して、動作しているかどうか教えてください。

display: flex; 
flex-wrap: wrap; 
align-items: center; 
justify-content: center; 

※フレックスラップを追加しました。