Vertically center text responively - css

Question

I have two divs floating next to each other: one has large headline text, and the other has a photo with a caption. The goal is to have the headline text vertically centered regardless of what the div height ends up being.
I've tried several methods to achieve this, but it's being pretty stubborn. I've included my code in the following codepen as reference:
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

I use this method below. Let your container get it's height from the image, and then vertically center the text.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

Answer 2

You can use flexbox and align-self on the child container. Try adding these styles:
.container_16 {
display: flex;
width: 90%;
}
.headline {
align-self: center;
}

Answer 3

You can apply the following CSS to get the text vertically aligned.
.gold {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
This will keep it aligned regardless of the div height.

Answer 4

Instead float, use display:(inline-block,table,table-cell, flex) + vertical-align or 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 and 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 and 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

Simple solution using display: table-cell; adapted from this CSS Tricks article: Vertically Center Multi-Lined Text
<div class="parent">
<p>Multi <br>line</p>
</div>
.parent {
display: table;
}
.parent p {
display: table-cell;
vertical-align: middle;
}
Demo on JS Bin