title: Aligning a div vertically middle
body: <p>I want my red rectangle in the middle of the number, for this I have added a wrapper <code>div</code> with style <code>display:table</code> and for <code>box div</code> style is <code>display:table-cell, vertical-align:middle</code>. Following is my html  </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-html lang-html prettyprint-override"><code>&lt;div class="repeat_div" style="border-right: 0px solid rgb(158, 158, 158); padding: 0px 15px; float: left;"&gt;
    &lt;div class="topLabel" style="margin-left: 25px; font-size: 12px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158); background-color: transparent;"&gt;&lt;span&gt;Youtube Top&lt;/span&gt;&lt;/div&gt;
    &lt;div class="boxStatsContainer" style="float: left;"&gt;
      &lt;div style="float: left; display:table"&gt;
        &lt;div class="box" style="float: left; background-color: rgb(235, 134, 79); width: 15px; height: 20px; display:table-cell; vertical-align:middle"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="stats" style="font-size: 48px; float: left; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: black;"&gt;&lt;span style="margin-left: 10px;"&gt;$620&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="bottomLabel" style="font-size: 10px; margin-left: 25px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158);"&gt;&lt;span&gt;Youtube&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But red box is not in the middle</p>