Css 文本在按钮中没有垂直居中（Bootstrap 4.4 Safari macOS）

我怎样才能解决这个问题？我使用的是Bootstrap 4.4，所有按钮样式都是默认的，除了：

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.btn-action {
  border-radius: 1.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  text-transform: uppercase;
  font-weight: 500;
}
.btn-yellow {
  background-color: #ffd802;
  font-family: "Roboto", sans-serif;
}

问题只存在于macOS上的Safari中。 HTML:

读故事

你至少可以放HTML代码吗？@huanfeng我已经添加了详细信息（CSS/HTML）你至少可以放HTML代码吗？@huanfeng我已经添加了详细信息（CSS/HTML）

<div class="text-center">
  <button class="btn btn-action btn-yellow" type="button">
    Read the Story
  </button>
</div>