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

我们应该将第一列显示为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>