如何实现Bootstrap 4按钮内文本的垂直居中？

我之前也碰到过类似的按钮文本垂直居中问题，尤其是用Bootstrap的btn-sm搭配特殊符号（比如«这类箭头）的时候特别容易出现偏移。咱们来试试这几个解决办法：

首先先把你给出的代码补全方便参考：

<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, currentPage() - 1), disabled: currentPage() === 0">&lsaquo;</button>
  <!-- 其他分页按钮、页码显示、下一页按钮等省略 -->
</div>

方案1：用Flex布局强制内部居中 #

Bootstrap的按钮默认不是flex布局，所以文本是基于基线对齐的，换成inline-flex就能让内容完美垂直居中，不管是什么字符：

.btn-sm.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 要是还有轻微偏移，可以加个vertical-align兜底 */
  vertical-align: middle;
}

然后给你的分页按钮加上这个自定义类：

<button class="btn btn-sm mx-1 pagination-btn" data-bind="click: gotoPage.bind($data, 0)">&laquo;</button>

方案2：微调Padding和Line-height #

有时候btn-sm默认的内边距和行高搭配特殊字符会有错位，你可以手动调整到合适的数值：

.btn-sm.pagination-btn {
  line-height: 1; /* 让行高和按钮内容高度匹配 */
  padding: 0.3rem 0.5rem; /* 上下内边距可以根据实际显示微调 */
}

方案3：针对特殊字符做偏移调整 #

有些符号的字体基线和普通文字不一样，比如箭头类符号，你可以给符号套个span，用相对定位微调位置：

<button class="btn btn-sm mx-1" data-bind="click: gotoPage.bind($data, 0)">
  <span class="pagination-arrow">&laquo;</span>
</button>

.pagination-arrow {
  position: relative;
  top: 1px; /* 正负值都试试，根据你用的字体调整 */
}

你可以先试方案1，这个是最通用的，基本能解决大部分垂直居中问题。如果还是有问题，再结合方案2或3微调就行。

内容的提问来源于stack exchange，提问作者Tom