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设置偏移量

Answer 2

添加此样式：

.text-cell {
     display     : flex; 
     align-self  : center;
}

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

2 个答案: