Vertically centering span inside ul in Bootstrap pagination

Question

So this kind of question has been asked many times, I know, but for some reason nothing seems to work for me. This is a simplified version of what I have (with the last solution I tried):

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

And this is what it looks like (colored in blue and red for descriptive purposes): original layout

JSFiddle: https://jsfiddle.net/oxaa30ug/ (not exactly as the picture but still shows my problem)

What I'm trying to accomplish is to get the blue span as well as the text at the right centered vertically, and not at the top as they currently are. Any help is very appreciated.

please add a jsfiddle – Abhishek Ranjan Jul 23 '17 at 05:22 — Abhishek Ranjan, Jul 23 '17 at 05:22
JSFiddle added as requested – Dok Asov Jul 23 '17 at 05:51 — Dok Asov, Jul 23 '17 at 05:51

score 0 · Answer 1 · answered Jul 23 '17 at 05:26

0

You can use a custom class when needed.
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

vertical-align with Bootstrap 3

In bootstrap 4, they have provided a dedicated class align-content-center (using flexboxes)

answered Jul 23 '17 at 05:26

Abhishek Ranjan

498
3
17

Thanks. To which element would I add that class? – Dok Asov Jul 23 '17 at 05:31
to the parent element – Abhishek Ranjan Jul 23 '17 at 05:32
Then you better switch to using flexboxes. They are now supported everywhere. – Abhishek Ranjan Jul 23 '17 at 05:45

Vertically centering span inside ul in Bootstrap pagination

1 Answers1