"x Of y" style css, separator in the middle, vertical align to the middle
<p>I have a series of articles to be displayed in a web page.</p>

<p>The articles count is a const number, say 100. I want to display an header with this template:</p>

<pre><code>[current_article_index] / 100
</code></pre>

<p>The problem is when I style the slash separator and make it bigger then the numbers, the numbers are not being vertically aligned:</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>#box {
  font-size: 12px;
  text-align: center;
}
.of {
  font-size: 20px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box"&gt;
  &lt;span class="a"&gt;13&lt;/span&gt;
  &lt;span class="of"&gt;/&lt;/span&gt;
  &lt;span class="b"&gt;100&lt;/span&gt;
  &lt;div&gt;</code></pre>
</div>
</div>
</p>

<p>I have tried using table layout, but this cause the whole div being aligned to the left, instead of center:</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>#box {
  display:table;
  font-size: 12px;
  text-align: center;
}
.of {
  font-size: 20px;
}
.a , .b{
  display:table-cell;
  vertical-align:middle;
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box"&gt;
  &lt;span class="a"&gt;13&lt;/span&gt;
  &lt;span class="of"&gt;/&lt;/span&gt;
  &lt;span class="b"&gt;100&lt;/span&gt;
  &lt;div&gt;</code></pre>
</div>
</div>
</p>

<p>What else can I do?</p>