在Bootstrap 3中相对于下一列垂直对齐图像

Question

我想将一个或多个图像与文本（高度未知）垂直对齐。图像应垂直居中：

当前的HTML代码如下所示：

<div class="row">
    <div class="col-md-3">
        <img src="images/sampleimage.png" class="img-rounded img-responsive"/>
    </div>
    <div class="col-md-9">
        Text goes here
    </div>
</div>

如何在不知道文本列高度的情况下实现这一目标？

修改 我现在可以居中对齐图像： CSS：

row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:800px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

将div更改如下：

<div class="row row-sm-flex-center">

但是图像彼此重叠。有没有办法均匀地垂直分布图像？

Answer 1

假设使用Flexible box layout是一个选项，我们可以均匀地在图像之间分配第一列的额外垂直空间。

我们应display将第一列作为flex容器，并将其方向从row（默认值）更改为column，然后添加justify-content: space-around为了实现布局：

扩展来自@KevinNelson的answer an answer of mine {/ 3}}：

Example Here （由于简洁，省略了供应商前缀。）

＆＃13;

＆＃13;

.row-xs-flex-center {
  display:flex;
  align-items:center;
}

@media ( min-width:768px ) {
 .row-sm-flex-center {
    display:flex;
    align-items:center; /* up to you */
  }

  .image-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* or center */
    align-self: stretch;     /* make sure that the column is stretched */
    justify-content: space-around;
  }
}
@media ( min-width: 992px ) {
  .row-md-flex-center {
    display:flex;
    align-items:center;
  }
}
@media ( min-width: 1200px ) {
  .row-lg-flex-center {
    display:flex;
    align-items:center;
  }
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row row-sm-flex-center">
    <div class="col-sm-3 image-container">
      <img src="http://placehold.it/80" class="img-rounded img-responsive"/>
      <img src="http://placehold.it/80" class="img-rounded img-responsive"/>
    </div>
    <div class="col-sm-9">
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text <br>
      Text
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;