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

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

#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

“x of y”样式css，中间的分隔符，垂直对齐中间

3 个答案: