title: Vertical align span text inside inline-block div
body: <p>I am building a website with a flat design. I have a header and under it two different coloured blocks next to each other. I tried float left and right but was advised to use display: inline-block instead.</p>
  
  <p>I ran into an issue, though. I want to place some text right in the middle of both the left and right block and tried to use the align-items: center, but figured out that only works if the div is set to flex.</p>
  
  <p>So my question is, can I somehow keep my inline-block and get my text centered in the middle of my blocks (both horizontal and vertically)?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    body {
        margin: 80px 0 0;
      }
      #pagewrapper {
        width: 100%;
      }
      #header {
        width: 100%;
        height: 80px;
        background-color: #008B8B;
        position: fixed;
        top: 0;
      }
      .content-left,
      .content-right {
        width: 50%;
        height: 500px;
        color: #FFFFFF;
        display: -moz-inline-stack;
        display: inline-block;
        zoom: 1;
        *display: inline;
      }
      .content-left {
        background-color: #66CC99;
      }
      .content-right {
        background-color: #20B2AA;
      }
      #header-bot {
        height: 800px;
        background-color: #F8F8FF;
      }
      #footer {
        height: 50px;
        background-color: #AFEEEE;
      }
      .title {
        font-size: 18px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="pagewrapper"&gt;
      &lt;div id="header"&gt;
      &lt;/div&gt;
      &lt;!-- End of Header --&gt;
      &lt;div class="content-left"&gt;
        &lt;span class="title"&gt;This is left Content&lt;/span&gt;
      &lt;/div&gt;
      &lt;!-- End of Content Left --&gt;
      &lt;div class="content-right"&gt;
        &lt;span class="title"&gt;This is Right Content&lt;/span&gt;
      &lt;/div&gt;
      &lt;!-- End of Content Right --&gt;
      &lt;div id="header-bot"&gt;
      &lt;/div&gt;
      &lt;!-- End of Header-Bot --&gt;
      &lt;div id="footer"&gt;
      &lt;/div&gt;
      &lt;!-- End of Footer --&gt;
    &lt;/div&gt;
    &lt;!-- End of PageWrapper --&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>