title: How to center vertically the text within a multiple div
body: <p>I've been trying hard for the past hours to switch from the left column to the right one. I mean, I'm trying to center vertically the text div inside the grey div.</p>
  
  <p>I would love to get some of your help. I've read a lot of tutorials and forum answer but didn't get the expected result yet.</p>
  
  <p>Any advice is more than welcome :)</p>
  
  <p><img src="https://i.stack.imgur.com/UUAGn.jpg" alt="Present problem and expected result">
  HTML Code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box-key-message{
      height: 240px;
      position: relative;
      background-color: #eeeeee;
      border-radius: 10px;
  }
  
  .box-key-message div {
      display:inline-block;
      vertical-align:middle;
      padding: 20px;
      text-align: justify;
  }
  
  .box-key-message span {
      font-weight:bold;
      font-size:16px;
      color: #D5420F;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="col-lg-4 col-lg-offset-1"&gt;
      &lt;div class="box-key-message"&gt;
      &lt;div&gt;
        &lt;span&gt; Gratuit&lt;/span&gt;
        &lt;br /&gt;&lt;br /&gt;
          Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.
        &lt;br /&gt;&lt;br /&gt;
          Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;br /&gt;&lt;br /&gt;
  
      &lt;div class="box-key-message"&gt;
      &lt;div&gt;
      &lt;span&gt;Simple et Rapide&lt;/span&gt;
        &lt;br /&gt;&lt;br /&gt;
      Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.
        &lt;br /&gt;&lt;br /&gt;
      Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;&lt;br /&gt;
  
      &lt;div class="box-key-message"&gt;
      &lt;div&gt;
      &lt;span&gt;Sans engagement&lt;/span&gt;
        &lt;br /&gt;&lt;br /&gt;
      Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.
        &lt;br /&gt;&lt;br /&gt;
      Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;&lt;br /&gt;
  
      &lt;div class="box-key-message"&gt;
      &lt;div&gt;
      &lt;span&gt;Et pour payer l’étudiant ?&lt;/span&gt;
        &lt;br /&gt;&lt;br /&gt;
      L’étudiant vous facturera la prestation en direct à la fin de la mission.
      &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>