title: Why is vertical-align: middle not working on my span or div?
body: <p>I'm trying to vertically center a <code>span</code> or <code>div</code> element within another <code>div</code> element. However when I put <code>vertical-align: middle</code>, nothing happens. I've tried changing the <code>display</code> properties of both elements, and nothing seems to work.</p>
  
  <p>This is what I'm currently doing in my webpage:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
    height: 72px;
    vertical-align: middle;
    border: 1px solid black;
    padding: 2px;
  }
      
  .inner {
    vertical-align: middle;
    border: 1px solid red;    
  }
      
  .second {
    border: 1px solid blue; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
    &lt;div class="inner"&gt;
      This box should be centered in the larger box
      &lt;div class="second"&gt;Another box in here&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a jsfiddle of the implementation showing that it doesn't work: <a href="http://jsfiddle.net/gZXWC/" rel="noreferrer">http://jsfiddle.net/gZXWC/</a></p>