html - bootstrap 4 按钮文本对齐

Question

这应该不难，但它让我抓狂:D我有一个简单的按钮(用于测试目的)看起来像这样:

.btn-test {
  height: 100px;
}

<button class="btn btn-test">
  <span>This is a test</span>
</button>

如果您使用 Bootstrap 并运行那段代码，您将看到:

https://codepen.io/r3plica/pen/MPbryQ

如您所见，文本“This is a test”是垂直对齐的。我查看了该按钮的 CSS，但看不到它的设置位置。我认为这与 flexbox 有关。我尝试将 align-items-start 添加到按钮类中，但没有任何变化。

肯定有人知道如何轻松地将文本对齐到顶部或底部？

Answer 1

你需要在按钮中添加.d-flex，之后你可以应用其他定位类如.align-self-start, .align-self-end, .align-self-baseline 等到跨度，这将相应地定位文本。

即使您不应用 .align-self-start，它也会默认位于顶部。

<button class="btn btn-test d-flex">
    <span class="align-self-start">This is a test</span>
</button>

这应该适合你。