引导 - 中心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>