How to vertical align a div?

Question

https://codepen.io/anon/pen/LjwyvR

I want to vertical align the tan container/text container in the middle. Like this.

https://i.stack.imgur.com/lucIR.jpg

I don't want to use the transform: translate method because I want to support IE8

<div class="container clearfix">
  <div class="text-container">
    <h3>Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod mauris non tellus luctus, ac dignissim arcu tincidunt. Praesent vulputate orci nibh, a egestas mauris interdum vitae. Sed convallis porta dui efficitur interdum. Sed id porta arcu, vitae ultrn porttitor nisi ac placerat vestibulum.</p>
  </div>
  <div class="img"></div>
</div>



.container {
  width: 100%;
  background-color: grey;
}

.text-container, .img {
  width: 50%;
  float: left;
}

.text-container {  
  background-color: tan;  
}

.img {
  height: 300px;  
  background: url('https://static.pexels.com/photos/56875/tree-dawn-nature-bucovina-56875.jpeg');  
  background-size: cover;  
}


.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Answer 1

You're gonna have to use display: table on the parent container.

HTML:

<div class="container clearfix">
  <div class="text">
    <div class="text-container">
      <h3>Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod mauris non tellus luctus, ac dignissim arcu tincidunt. Praesent vulputate orci nibh, a egestas mauris interdum vitae. Sed convallis porta dui efficitur interdum. Sed id porta arcu, vitae ultrn porttitor nisi ac placerat vestibulum.</p>
    </div>
  </div>
  <div class="img"></div>
</div>

And CSS:

.container {
  width: 100%;
  background-color: grey;
  display: table;
}

.text, .img {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
}

.text-container {  
  background-color: tan;  

}

.img {
  height: 300px;  
  background: url('https://static.pexels.com/photos/56875/tree-dawn-nature-bucovina-56875.jpeg');  
  background-size: cover;  
}
.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Codepen: https://codepen.io/anon/pen/LjwyvR