I have been searching on Google for an answer to this question, but so far I have not found a solution. I am currently working on a set of page controls and I am struggling to center my text vertically within the buttons.
Below is my current html:
<div class="row input-group align-items-center justify-content-center" data-bind="visible: pageCount > 1">
<button class="btn btn-sm mx-1" data-bind="click: gotoPage.bind($data, 0)">«</button>
<button class="btn btn-sm mx-1" data-bind="click: gotoPage.bind($data, page() - 1)">‹</button>
<div class="ml-1" style="width:4rem">
<input class="text-right form-control form-control-sm" type="number" data-bind="value: page" />
</div>
<span class="mx-1" data-bind="text: ' / ' + (pageCount) "></span>
<button class="align-middle btn btn-sm mx-1" data-bind="click: gotoPage.bind($data, page() + 1)">›</button>
<button class="btn btn-sm mx-1" data-bind="click: gotoPage.bind($data, pageCount)">»</button>
</div>
The data-bind attributes are my knockout bindings, just so you know.
This is how it appears in Chrome:
https://i.sstatic.net/oZ1sJ.png
As you can see, the guillemets are slightly below the vertical center of the buttons. I have tried applying various Bootstrap classes like align-items-center, align-middle, text-center, etc. to both the parent div and the buttons, but without success.