css - 响应地垂直居中文本

Question

我有两个相邻 float 的 div:一个有大标题文本，另一个有一张带标题的照片。目标是让标题文本垂直居中，而不管最终的 div 高度是多少。

我已经尝试了几种方法来实现这一点，但它非常顽固。我已将我的代码包含在以下代码笔中作为引用:

http://codepen.io/ckatz/pen/KaBNxm

HTML:

<div class="container_16">
  <div class="grid_8 headline">
    <span class="gold"><strong>We have a special way of helping</strong>/span><br> each individual find their success.</p>
  </div>
  <div class="grid_8">
    <div>
      <div class="wp-caption alignnone" style="width: 100%">
        <img src="http://placehold.it/500x500" alt="" width="100%" height="auto">
        <p class="wp-caption-text">photo caption</p>
      </div>
    </div>
  </div>

CSS:

.container_16 {
  width: 90%;
}

.container_16 .grid_8 {
  width: 47%;
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

p.wp-caption-text {
  text-align: center;
  font-weight: bold;
  font-style: normal;
  margin: 1em;
  padding: 0 0 1em 0;
}

Answer 1

我在下面使用这个方法。让您的容器从图像获取高度，然后将文本垂直居中。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}