title: Vertically center content of a inline-block div
body: <p>I am trying to center horizontally and vertically the content of my divs. I found some threads explaining it, but it never fits well in my code.</p>
  
  <p>There are 3 centered div (.block) in a another div (.container) which is also centered but on the screen. Content of blocks is not centered vertically. I tried to use line-height but I loose some text (out of block).</p>
  
  <p>Here is my code :</p>
  
  <pre><code>.container {
      width: 70%;
      margin: 10px auto;
      position: relative;
      text-align: center;
      border: 1px solid black;
  }
  
  .block {
    background-image: -webkit-linear-gradient(150deg, #D7D7D7, #979797);
    background-image: -o-linear-gradient(150deg, #D7D7D7, #979797);
    background-image: linear-gradient(240deg, #D7D7D7, #979797);
    border-radius: 10px;
    height: 100px;
    width: 100px;
    display:inline-block;
    margin: 10px;
    padding: 10px;
    vertical-align: middle;
    line-height: 1.5;
  }
  
  &lt;div class="container"&gt;
      &lt;div class="block"&gt;Hello&lt;/div&gt;
      &lt;div class="block"&gt;Everybody&lt;/div&gt;
      &lt;div class="block"&gt;Would like to center it please&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried to put content in a p tag, it's better but still not centered.</p>
  
  <p>Thanks.</p>