垂直中心自举推/拉柱的内容

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来覆盖某些引导规则： 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 */
}

Answer 2

如果你对IE8没有垂直居中的外观感到满意，这是另一种方法。

DEMO：http://jsbin.com/tiwic/1/edit

HTML：

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-push-6">
      <img class="img-responsive" src="http://placehold.it/900x600">
    </div>
    <div class="col-sm-4 col-sm-pull-5 center-box">
      <div class="content">
        I want this to be vertically centered. I have 
        to use the col-sm-push and col-sm-pull classes
        to make sure the text is below the image on
        mobiles.
      </div>
    </div>
  </div>
</div>

---

<强> CSS

@media (min-width:768px) { 
    .center-box {
        display: inline-block;
        position: relative;
        margin: 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .center-box:before {
        content: "";
        display: block;
        padding-top: 50%;
        padding-top:0%\9; /*ie8 will just be at the top */

    }

    .center-box > .content {
        top: 50%;
        text-align: center;
        vertical-align: center;
        position: relative;
        transform: translateY(-50%); /* ie9 and up only */
    }

}


/* -------- combines 


http://www.mademyday.de/css-height-equals-width-with-pure-css.html


http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ -- which doesn't work without a height

--------- */