负责任地垂直居中文本

Question

我有两个并排浮动的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%);
}

Answer 2

可以在子容器上使用弹性框和对齐自身。 尝试添加以下样式：

.container_16 {
    display: flex;
    width: 90%;
}
.headline {
    align-self: center;
}

Answer 3

您可以应用以下 CSS 来垂直对齐文本。

.gold {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

无论div 高度如何，这都将使其保持对齐。

Answer 4

改为浮动，使用 display ：( inline-block ， table ， table-cell ， flex ( + vertical-align 或 margin ：

• inline-block + vertical-align

@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: normal;
}
p {
  font-size: 1em;
  line-height: 1.4em;
}
.container_16 {
  width: 90%;
}
.container_16 .grid_8 {
  width: 47%;
  display: inline-block;
  vertical-align:middle;
  position: relative;
}
.headline {
  font-size: 3em;
}
.gold {
  color: #ffb500;
}
p.wp-caption-text {
  text-align: center;
  font-weight: bold;
  font-style: normal;
  margin: 1em;
  padding: 0 0 1em 0;
}

<div class="container_16">
  <div class="grid_8 headline">
    <p>
      <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%px">
        <img src="http://placehold.it/500x500" alt="" width="100%" height="auto">
        <p class="wp-caption-text">This is a caption for the photo here.</p>
      </div>
    </div>
  </div>

• display:table-cell和vertical-align

@import url('https://fonts.googleapis.com/css?family=Montserrat');
 body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: normal;
}
p {
  font-size: 1em;
  line-height: 1.4em;
}
.container_16 {
  width: 90%;
  display:table;
  table-layout:fixed;
}
.container_16 .grid_8 {
  width: 47%;
  display: table-cell;
  vertical-align: middle;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
}
.headline {
  font-size: 3em;
}
.gold {
  color: #ffb500;
}
p.wp-caption-text {
  text-align: center;
  font-weight: bold;
  font-style: normal;
  margin: 1em;
  padding: 0 0 1em 0;
}

<div class="container_16">
  <div class="grid_8 headline">
    <p>
      <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%px">
        <img src="http://placehold.it/500x500" alt="" width="100%" height="auto">
        <p class="wp-caption-text">This is a caption for the photo here.</p>
      </div>
    </div>
  </div>

• display:flex和margin:auto 0;

@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: normal;
}
p {
  font-size: 1em;
  line-height: 1.4em;
}
.container_16 {
  width: 90%;
  display:flex;
}
.container_16 .grid_8 {
  width: 47%;
  margin:auto 0;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}
.headline {
  font-size: 3em;
}
.gold {
  color: #ffb500;
}
p.wp-caption-text {
  text-align: center;
  font-weight: bold;
  font-style: normal;
  margin: 1em;
  padding: 0 0 1em 0;
}

<div class="container_16">
  <div class="grid_8 headline">
    <p>
      <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%px">
        <img src="http://placehold.it/500x500" alt="" width="100%" height="auto">
        <p class="wp-caption-text">This is a caption for the photo here.</p>
      </div>
    </div>
  </div>

Answer 5

使用改编自此 CSS 技巧文章的display: table-cell;的简单解决方案：垂直居中多行文本

<div class="parent">
  <p>Multi <br>line</p>
</div>

.parent {
  display: table;
}
.parent p {
  display: table-cell;
  vertical-align: middle;
}

在 JS 垃圾桶上演示