html - 垂直居中 Bootstrap 推/拉列的内容

Question

我想将 Bootstrap 列的内容垂直居中，其中使用 Bootstrap col-sm-push-* 和 col-sm-pull-* 排列列 类。普通的 table/table-cell 方法不起作用。

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-xs-push-6">
      <img class="img-responsive" src="http://placehold.it/300x150">
    </div>
    <div class="col-xs-4 col-xs-pull-5 text-center">
      <p>
        should be v-centered
      </p>
    </div>
  </div>
</div>

这是一个演示:http://jsbin.com/jitogoqaruha/1/edit

更新:进行了调整，使我想要做的事情更加明显。

Answer 1

您仍然可以使用display:table 和direction 来覆盖一些 Bootstrap 规则: http://jsbin.com/tokixojojuru/1/edit

.container {
  display:table;
  direction:rtl;
}
.row>div {
  display:table-cell;
  vertical-align:middle;
  direction:ltr;/*reset to your regular flow */
}