文本垂直對齊 - 引導

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> 

正如你可以看到我已經使用了引導網格佈局，以圖片和文字的位置，旁邊給對方。

我最初嘗試在行本身上使用帶有柔性盒的垂直居中技巧，但這樣可以防止文本在較小視口下在圖像下移動。

這是類

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

所以我不得不：<div class="row vertical-center"></div>

它生產：

正如你可以看到由此產生的所需的間距，但淘汰的自然元素的流動。

我知道我可以使用保證金，但有沒有一種方法來計算，以便我不必根據圖像的大小手動設置保證金？

Answer 1

請嘗試下面的代碼，讓我知道它是否工作。

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

* Just added flex-wrap：wrap;