Html 引导分页中ul内部的垂直对中跨距

我知道，这类问题已经被问过很多次了，但出于某种原因，我似乎什么都做不到。 这是我的简化版本（使用我尝试的上一个解决方案）：

菲拉斯·波尔·帕吉纳：
5
 | |莫斯特兰多1-5共8场

这就是它的外观（蓝色和红色用于描述）：

JSFiddle：（与图片不完全一样，但仍然显示了我的问题）

我要做的是让蓝色的跨度和文本在右边垂直居中，而不是像现在这样在顶部。非常感谢您的帮助

您可以在需要时使用自定义类

---

在bootstrap 4中，他们提供了一个专用类

align content center

（使用FlexBox）

请添加一个JSIDdleJSIDdle，该类是根据请求添加的。我应该将该类添加到哪个元素？添加到父元素然后最好切换到使用FlexBox。他们现在得到了各地的支持。

<ul class="pagination pull-right" style="display: table-cell; vertical-align: middle; text-align: center; background: red;">
  <span class="pagination-info pull-left" style="background: blue">Filas por página:&nbsp</span>
  <span style="display: inline-block;">
    <span class="btn-group dropup pull-left" style="position: relative; display: inline-block; vertical-align: middle;">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        5&nbsp<span class="caret"></span>
      </button>
    </span>
    &nbsp|| Mostrando 1 - 5 de 8 filas en total
  </span>
</ul>

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}