Как вы вертикально центрируете текст внутри кнопки начальной загрузки 4?

Question

Я пытался найти этот вопрос, но пока не нашел ответа. Я работаю над набором элементов управления страницей, и у меня возникают проблемы с размещением текста по центру кнопок.

Вот мой 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)">&laquo;</button>
  <button class="btn btn-sm mx-1" data-bind="click: gotoPage.bind($data, page() - 1)">&lsaquo;</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)">&rsaquo;</button>
  <button class="btn btn-sm mx-1" data-bind="click: gotoPage.bind($data, pageCount)">&raquo;</button>
</div>

Эти data-bind атрибуты - мои нокаутирующие привязки.

Вот что отображается как Chrome:

Как видите, гильметы находятся чуть ниже вертикального центра кнопок. Я попытался применить все классы начальной загрузки для начальной загрузки (align-items-center, align-middle, text-center и т. Д.) К родительскому элементу div и кнопкам, но пока не повезло.

Answer 1

Я создал точный фрагмент с помощью bootstrap-4 cdn, и он выглядит отлично, ниже приведен фрагмент

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

Answer 2

Проблема в ваших объектах HTML. в нем по умолчанию есть место. см. пример ниже.

.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>&laquo;<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>