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

您可以在需要时使用自定义类。
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

vertical-align with Bootstrap 3

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

在Bootstrap分页中垂直居中于ul内部

1 个答案: