相对于下一列在 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 是一个选项，我们可以在图像之间平均分配第一列的额外垂直 space。

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

展开@KevinNelson's answer which is inspired from an answer of mine:

Example Here （为简洁省略供应商前缀。）

.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;
  }
}

<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>

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

Vertical align images evenly in Bootstrap 3 with respect to next column

html

css

vertical-alignment

twitter-bootstrap

twitter-bootstrap-3