html - Bootstrap 分页中 ul 内的垂直居中跨度

Question

所以这种问题已经被问过很多次了，我知道，但出于某种原因，似乎没有什么对我有用。这是我所拥有的简化版本(使用我尝试过的最后一个解决方案):

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

这就是它的样子(出于描述目的用蓝色和红色着色): original layout

JSFiddle:https://jsfiddle.net/oxaa30ug/ (与图片不完全一样，但仍然显示我的问题)

我想要完成的是让蓝色跨度以及右侧的文本垂直居中，而不是像现在这样位于顶部。非常感谢任何帮助。

Answer 1

You can use a custom class when needed.

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

vertical-align with Bootstrap 3

在 bootstrap 4 中，他们提供了一个专用类 align-content-center(使用 flexboxes)