垂直对齐Bootstrap Col

Question

我需要垂直对齐一个小的boostrap柱细胞......

我的想法是，我不能用像素（height, line-height，例如）来硬编码，所有东西都应该是相对的，因为我不知道绿色单元格高度的先验（变量为内容）。

top +50 & translateY -50似乎不起作用......

CodePen is here。代码如下：

＆＃13;

＆＃13;

.a{background: lightgreen;}
.b{background: yellow;}
.cont {background:orange;}
.vcenter {top: 50%; transform:translateY(-50%);}

＆＃13;

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


<div class="col-xs-12 cont">
  <div class="a col-xs-8">
    <img src="http://lorempixel.com/100/150">
    some description
  </div>
  <div class="b vcenter col-xs-4">
    This should be middle aligned vertically!
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

感谢@Pete找到了一个需要影响容器显示的解决方案：

.cont { display: flex; }
.vcenter { align-self: center; }