如何在bootstrap 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

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

Answer 2

我使用bootstrap-4 cdn创建了一个精确的片段，它看起来很好，下面是片段

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;