垂直居中文本

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

您可以在子容器上使用flexbox和align-self。尝试添加这些样式：

.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） + {{3} }或margin：

• inline-block + vertical-align

＆＃13;

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

• display:table-cell和vertical-align

＆＃13;

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

• display:flex和margin:auto 0;

＆＃13;

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 5

使用{CSS}技巧改编的<div class="parent"> <p>Multi <br>line</p> </div> 简单解决方案：Vertically Center Multi-Lined Text

.parent {
  display: table;
}

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

{{1}}

Demo on JS Bin