引導 - 中心IMG行垂直

Question

我一直在試圖永遠包含在div img的是，在該行正確居中的這一形象這裏是我的html

  <div class="row"> 
      <div class="col-md-9"> 
       <div class="col-md-12"> 
        <h3 style="text-transform: uppercase"><strong>Title</strong></h3> 
        <p>Text</p> 
        <br> 
        <h3 style="text-transform: uppercase"><strong>Title</strong></h3> 
        <p>Text</p> 
        <br> 
        <h3 style="text-transform: uppercase"><strong>Title</strong></h3> 
        <p>Text(2 male, 1 female, 3 mixed characters)</p> 
       </div> 
      </div> 
      <div class="col-md-2"> 
       <img class="img-full center-block" src="img/img.jpg" alt=""> 
      </div> 
     </div> 

我已經在嘗試了所有的建議這個頁面，他們都沒有工作。 https://css-tricks.com/centering-css-complete-guide/

我不知道元素的高度，因爲這是一個響應式網站，所以我嘗試使用translate來移動圖像，並且發生了這種情況。

如果我使用Flexbox的，那麼我的手機設計打破，因爲列不崩潰吧，這個樣子。

如果我使用此代碼

.vcenter { 
display: inline-block; 
vertical-align: middle; 
float: none; 
} 

什麼也沒有發生

所以，我覺得我已經用盡任何衆所周知的解決方案。任何人有任何想法如何解決這個問題？我有一種感覺，我的問題是與柱內堆放我列，但如果我不這樣做，它打破了我的設計太...

編輯：這是我希望它看起來

Answer 1

此時，您將無法垂直對齊圖像，因爲包含的col-md-2會縮小到圖像的高度。您需要確保圖像的父元素具有較大的高度值。你可以在CSS中靜態設置col-md-9的高度（就像我在代碼片段中做的那樣），或者通過javascript動態檢查它。然後你可以運行我有下面的代碼（CSS將工作IE 9和起來，我也改變了自舉類XS的片段來說明）：

.vcenter { 
 
position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 
.taller{ height:300px;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
<div class="row"> 
 
      <div class="col-xs-9"> 
 
       <div class="row"> 
 
       <div class="col-md-12"> 
 
        <h3 style="text-transform: uppercase"><strong>Title</strong></h3> 
 
        <p>Text</p> 
 
        <br> 
 
        <h3 style="text-transform: uppercase"><strong>Title</strong></h3> 
 
        <p>Text</p> 
 
        <br> 
 
        <h3 style="text-transform: uppercase"><strong>Title</strong></h3> 
 
        <p>Text(2 male, 1 female, 3 mixed characters)</p> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-2 taller"> 
 
       <img class="img-full center-block vcenter" src="img/img.jpg" alt=""> 
 
      </div> 
 
     </div> 
 
</div> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

這應該做它爲JavaScript版本

$(document).ready(function(){ 
 
    matchColHeight(); 
 
}); 
 

 
$(window).resize(function(){ 
 
    matchColHeight(); 
 
}); 
 

 
function matchColHeight() { 
 
    var col1_height = $('.col1').height(); 
 
    $('.col2').css('height', col1_height); 
 
}

.vcenter { 
 
    position: relative; 
 
     top: 50%; 
 
     transform: translateY(-50%); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
    <div class="container"> 
 
    <div class="row"> 
 
       <div class="col-xs-9"> 
 
        <div class="row"> 
 
        <div class="col-md-12 col1"> 
 
         <h3 style="text-transform: uppercase"><strong>Title</strong></h3> 
 
         <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> 
 
         <br> 
 
         <h3 style="text-transform: uppercase"><strong>Title</strong></h3> 
 
         <p>Text</p> 
 
         <br> 
 
         <h3 style="text-transform: uppercase"><strong>Title</strong></h3> 
 
         <p>Text(2 male, 1 female, 3 mixed characters)</p> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-xs-2 col2"> 
 
        <img class="img-full center-block vcenter" src="img/img.jpg" alt=""> 
 
       </div> 
 
      </div> 
 
    </div> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>