在引导分页中的 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>

这就是它的样子(出于描述目的，以蓝色和红色着色(： 原始布局

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

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

Answer 1

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

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

与引导程序 3 垂直对齐

在引导程序 4 中，他们提供了一个专用的类align-content-center(使用 flexbox(