html - "x Of y" style css, separator in the middle, vertical align to the middle -

i have series of articles displayed in web page.

the articles count const number, 100. want display header template:

[current_article_index] / 100 

the problem when style slash separator , make bigger numbers, numbers not being vertically aligned:

#box {    font-size: 12px;    text-align: center;  }  .of {    font-size: 20px;  }

<div id="box">    <span class="a">13</span>    <span class="of">/</span>    <span class="b">100</span>    <div>

i have tried using table layout, cause whole div being aligned left, instead of center:

#box {    display:table;    font-size: 12px;    text-align: center;  }  .of {    font-size: 20px;  }  .a , .b{    display:table-cell;    vertical-align:middle;    }

<div id="box">    <span class="a">13</span>    <span class="of">/</span>    <span class="b">100</span>    <div>

what else can do?

you can use flexbox instead

#box {    display: flex;    font-size: 12px;    align-items: center;    justify-content: center;  }    .of {    font-size: 25px;  }

<div id="box">    <span class="a">13</span>    <span class="of">/</span>    <span class="b">100</span>  <div>

or because span's inline elements can use vertical-align: middle

#box {    font-size: 12px;    text-align: center;  }  .of {    font-size: 25px;  }  span {    vertical-align: middle;  }

<div id="box">    <span class="a">13</span>    <span class="of">/</span>    <span class="b">100</span>    <div>