"x Of y"样式的 css，分隔符在中间，垂直对齐到中间

Question

我有一系列文章要在网页中显示。

文章计数是一个常量，比如说100。我想用这个模板显示一个标题：

[current_article_index] / 100

问题是，当我设置斜线分隔符的样式并使其大于数字时，数字没有垂直对齐：

#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>

我尝试过使用表格布局，但这导致整个div向左对齐，而不是居中对齐：

#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>

我还能做什么？

Answer 1

只需为.of元素添加vertical-align: middle：

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

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

Answer 2

您可以使用Flexbox代替

#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>

或者因为span是内联元素，所以您可以只使用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>

Answer 3

您可以添加线条高度来实现垂直对齐。

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

CSS

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

Fiddle