How do you vertically center text within a bootstrap 4 button? - html

Question

I've tried googling this question but I haven't found an answer yet. I'm working on a set of page controls and I'm having trouble getting my text to vertically center within the buttons.
Here's my html so far:
<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>
Those data-bind attrs are my knockout bindings fyi.
Here's what it's rendered as using Chrome:
As you can see, the guillemets are slightly below vertical center of the buttons. I've tried applying all the bootstrap vertical align classes I can think of (align-items-center, align-middle, text-center, etc) to the parent div and to the buttons, but have had no luck so far.

Answer 1

Problem is in your HTML entities. it has by default space in it. see below example.
.btn span {
border: 1px solid red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<h3>With Html entity</h3>
<button role="button" class="btn btn-sm mx-1 d-inline-flex align-items-center" data-bind="click: gotoPage.bind($data, 0)"><span>«<span></button>
<h3>Without Html entity</h3>
<button role="button" class="btn btn-sm mx-1 d-inline-flex align-items-center" data-bind="click: gotoPage.bind($data, 0)"><span>A</span></button>
<button role="button" class="btn btn-sm mx-1 d-inline-flex align-items-center" data-bind="click: gotoPage.bind($data, 0)"><span>a</span></button>

Answer 2

I created an exact snippet with bootstrap-4 cdn and its looking fine, below is the snippet
<link href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row input-group align-items-center justify-content-center">
<button class="btn btn-sm mx-1"><i class="fas fa-angle-double-left"></i></button>
<button class="btn btn-sm mx-1"><i class="fas fa-angle-left"></i></button>
<div class="ml-1" style="width:4rem">
<input class="text-right form-control form-control-sm" type="number" />
</div>
<span class="mx-1"></span>
<button class="align-middle btn btn-sm mx-1"><i class="fas fa-angle-right"></i></button>
<button class="btn btn-sm mx-1"><i class="fas fa-angle-double-right"></i></button>
</div>