javascript - 垂直居中相对位置+未知高度

Question

我的 WP 站点中有两个专栏。一个有文本/内容，另一个有背景图片。两者相对定位，高低不明。

HTML(使用 twitter - bootstrap 3 标记)

<article>

  <div id="...removed php code ">

      <div class="row">

         <div class="col-md-8 indx-img" style="background-image:url('...');">
         </div>

         <div class="col-md-4 text-cell">
           <h1><?php the_title(); ?></h1>
           <h3><?php the_category(' '); ?></h3>
         </div>      

      </div><!-- /row --> 

</article>

CSS

.indx-img {
  position: relative;
  padding: 16% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.text-cell {
  position: relative;
  padding: 0 25px;
  margin: 0;
}

我希望 text-cell div 在其列中垂直居中。列的高度由其相邻列 index-img div 和 padding: 15% 0

设置

Answer 1

你可以摆弄变换转换百分比和边距顶部百分比..类似的东西(玩 x 和 y 数字以获得期望的结果)

.text-cell {
  position: relative;
  padding: 0 25px;
  margin: x% 0 0;
  transform: translateY(y%)
}

或者在 jquery 中找出行高，然后在 jquery 中为那个 .text-cell div 设置偏移量