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

【问题标题】：Vertical align images evenly in Bootstrap 3 with respect to next column在 Bootstrap 3 中垂直对齐图像相对于下一列
【发布时间】：2015-05-09 18:53:26
【问题描述】：

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

当前的 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">

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

【问题讨论】：

你看过了吗：vertical-align with bootstrap 3？
谢谢，这很有帮助。我现在可以将图像居中对齐（参见编辑），但图像彼此堆叠。我希望图像垂直均匀分布，如上图所示。你对此有什么想法吗？

标签： html css twitter-bootstrap twitter-bootstrap-3 vertical-alignment

【解决方案1】：

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

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

扩展@KevinNelson的answer，灵感来自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>

【讨论】：

非常感谢！效果很好。